fix(emails): sharpen wordmark, add clear space, and standardize footer icon sizes#5802
Conversation
…r icon sizes - Re-rasterize the email wordmark from vector at 4x with baked-in vertical clear space so it renders crisp and is no longer clipped at the top/bottom; size the header logo box to 68x41 to match. - Normalize the footer social icons (X, LinkedIn, GitHub, Slack) to a uniform cap-height on 40x40 (2x) canvases so they read as the same visual size. - Add display:block + border:0 to the linked social icons to avoid Outlook's inline-image gap and blue link border.
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
PR SummaryLow Risk Overview Footer social icons in Reviewed by Cursor Bugbot for commit 9e4b94b. Configure here. |
Greptile SummaryThis PR refreshes the image assets and sizing used in transactional emails. The main changes are:
Confidence Score: 4/5The custom-logo sizing regression needs to be fixed before merging.
apps/sim/components/emails/components/email-layout.tsx Important Files Changed
Reviews (1): Last reviewed commit: "fix(emails): sharpen wordmark, add clear..." | Re-trigger Greptile |
| height='41' | ||
| {...(hasCustomLogo ? {} : { width: '68' })} |
There was a problem hiding this comment.
Custom Logos Inherit Wordmark Height
When brand.logoUrl is configured, this branch now enlarges that custom logo from 34px to 41px even though the new height is specific to the padded bundled wordmark. Wide or tall custom assets can expand the email header or appear oversized; retain the old height for custom logos.
| height='41' | |
| {...(hasCustomLogo ? {} : { width: '68' })} | |
| height={hasCustomLogo ? '34' : '41'} | |
| {...(hasCustomLogo ? {} : { width: '68' })} |
Summary
68x41to match the padded asset.display: block+border: 0to the linked social icons per email best practices (removes Outlook's 2–3px inline-image gap and the blue link border).Type of Change
Testing
Rendered the wordmark and footer icon row locally at display size to confirm the wordmark is crisp with clear space (no clipping) and left-aligns with the body text, and that all four social icons read as the same visual size. Lint clean.
Checklist