fix(emails): keep card boundary robust + don't reshape custom logos

waleedlatif1 · waleedlatif1 · commit 578cb5faf091 · 2026-06-30T19:49:18.000-07:00
- Canvas goes to #f8f8f8 (off Andres's newsletter) so the white card reads via
  contrast in clients that flatten inline borders, not the border alone (Greptile P2).
- Logo pins exact 70x34 only for the bundled wordmark; whitelabel brand.logoUrl now
  constrains by height with auto width so custom logos keep their aspect (Greptile P1).
diff --git a/apps/sim/components/emails/_styles/base.ts b/apps/sim/components/emails/_styles/base.ts
@@ -13,8 +13,8 @@ function buildColors() {
     isWhitelabeled && brand.theme?.primaryColor ? brand.theme.primaryColor : '#1a1a1a'
 
   return {
-    /** Main canvas background — platform `--bg` */
-    bgOuter: '#fefefe',
+    /** Main canvas background — a hair off-white so the white card reads via contrast, not the border alone */
+    bgOuter: '#f8f8f8',
     /** Card/container background — platform `--surface-2` */
     bgCard: '#ffffff',
     /** Primary text — platform `--text-primary` */
@@ -39,7 +39,7 @@ function buildColors() {
     /** Error surface border — platform `--error-muted` */
     errorBorder: '#fecaca',
     /** Footer background — matches the canvas */
-    footerBg: '#fefefe',
+    footerBg: '#f8f8f8',
   }
 }
 
diff --git a/apps/sim/components/emails/components/email-layout.tsx b/apps/sim/components/emails/components/email-layout.tsx
@@ -30,6 +30,7 @@ export function EmailLayout({
 }: EmailLayoutProps) {
   const brand = getBrandConfig()
   const baseUrl = getBaseUrl()
+  const hasCustomLogo = Boolean(brand.logoUrl)
 
   return (
     <Html>
@@ -42,10 +43,10 @@ export function EmailLayout({
           <Section style={baseStyles.header}>
             <Img
               src={brand.logoUrl || `${baseUrl}/brand/color/email/wordmark.png`}
-              width='70'
               height='34'
+              {...(hasCustomLogo ? {} : { width: '70' })}
               alt={brand.name}
-              style={{ display: 'block' }}
+              style={hasCustomLogo ? { display: 'block', width: 'auto' } : { display: 'block' }}
             />
           </Section>
 
