fix(emails): publish the resized wordmark at a new URL

#6648 replaced wordmark.png in place while changing its intrinsic aspect
and the pinned width/height. Mail clients and Gmail's image proxy cache
by URL, so the two collide in both directions: a cached 272x164 file
forced into the new 42x20 box renders 21.7% squashed, and every email
already delivered still carries width=68 height=41, which stretches the
new 168x80 file 20.3% the other way.

Restore wordmark.png byte-for-byte so delivered mail renders as it
always did, and serve the resized mark from wordmark-v2.png. The src now
comes from EMAIL_WORDMARK_SRC, and a test pins every retired raster's
dimensions so the next resize adds a file instead of replacing one.

Author: waleedlatif1

apps/sim/components/emails/components/email-layout.tsx

@@ -1,7 +1,7 @@
 import { Body, Container, Font, Head, Html, Img, Preview, Section } from '@react-email/components'
 import { baseStyles } from '@/components/emails/_styles'
 import { EmailFooter } from '@/components/emails/components/email-footer'
-import { EMAIL_WORDMARK_SIZE } from '@/lib/branding/wordmark'
+import { EMAIL_WORDMARK_SIZE, EMAIL_WORDMARK_SRC } from '@/lib/branding/wordmark'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { getBrandConfig } from '@/ee/whitelabeling'
 
@@ -75,7 +75,7 @@ export function EmailLayout({
         <Container style={baseStyles.container}>
           <Section style={baseStyles.header}>
             <Img
-              src={brand.logoUrl || `${baseUrl}/brand/color/email/wordmark.png`}
+              src={brand.logoUrl || `${baseUrl}${EMAIL_WORDMARK_SRC}`}
               alt={brand.name}
               {...(hasCustomLogo ? CUSTOM_LOGO_SIZE : WORDMARK_SIZE)}
               style={hasCustomLogo ? { display: 'block', width: 'auto' } : { display: 'block' }}

apps/sim/lib/branding/wordmark.test.ts

@@ -4,21 +4,29 @@
 import { readFileSync } from 'node:fs'
 import path from 'node:path'
 import { describe, expect, it } from 'vitest'
-import { EMAIL_WORDMARK_SIZE, WORDMARK_PATHS, WORDMARK_VIEW_BOX } from '@/lib/branding/wordmark'
+import {
+  EMAIL_WORDMARK_SIZE,
+  EMAIL_WORDMARK_SRC,
+  WORDMARK_PATHS,
+  WORDMARK_VIEW_BOX,
+} from '@/lib/branding/wordmark'
 
 /** Email clients do no responsive image selection, so the asset carries retina detail itself. */
 const MIN_RETINA_SCALE = 2
 
-const WORDMARK_PNG = path.join(
-  import.meta.dirname,
-  '..',
-  '..',
-  'public',
-  'brand',
-  'color',
-  'email',
-  'wordmark.png'
-)
+const PUBLIC_DIR = path.join(import.meta.dirname, '..', '..', 'public')
+
+/** The file the header actually points at, resolved through the same constant it uses. */
+const WORDMARK_PNG = path.join(PUBLIC_DIR, EMAIL_WORDMARK_SRC)
+
+/**
+ * Rasters retired from {@link EMAIL_WORDMARK_SRC}, with the box the mail that
+ * still references them was sent with. Those messages refetch these URLs
+ * forever, so the files must stay put and keep their original dimensions.
+ */
+const RETIRED_WORDMARKS = [
+  { src: '/brand/color/email/wordmark.png', width: 272, height: 164 },
+] as const
 
 /** Reads width/height out of a PNG's IHDR, which always follows the 8-byte signature. */
 function readPngSize(file: string): { width: number; height: number } {
@@ -50,4 +58,12 @@ describe('email wordmark asset', () => {
     expect(WORDMARK_PATHS).toHaveLength(4)
     for (const d of WORDMARK_PATHS) expect(d.startsWith('M')).toBe(true)
   })
+
+  it.each(RETIRED_WORDMARKS)(
+    'keeps $src intact for the mail already sent against it',
+    ({ src, width, height }) => {
+      expect(src).not.toBe(EMAIL_WORDMARK_SRC)
+      expect(readPngSize(path.join(PUBLIC_DIR, src))).toEqual({ width, height })
+    }
+  )
 })

apps/sim/lib/branding/wordmark.ts

@@ -25,9 +25,23 @@ export const WORDMARK_PATHS: readonly string[] = [
  * mark stands 20px tall; the width follows the view box. Both dimensions are
  * pinned because email clients do no responsive image selection.
  *
- * The header renders `public/brand/color/email/wordmark.png` rather than these
- * paths, because email clients strip inline SVG. That file is these outlines
- * filled with the email palette's `textBody`, rasterized at 4x so the mark
- * stays crisp on retina and this box can be retuned without re-exporting it.
+ * The header renders {@link EMAIL_WORDMARK_SRC} rather than these paths, because
+ * email clients strip inline SVG. That file is these outlines filled with the
+ * email palette's `textBody`, rasterized at 4x so the mark stays crisp on retina
+ * and this box can be retuned without re-exporting it.
  */
 export const EMAIL_WORDMARK_SIZE = { width: 42, height: 20 } as const
+
+/**
+ * Public path of the email wordmark raster.
+ *
+ * **Never replace this file in place — publish a new filename instead.** A sent
+ * email is immutable: it carries the `width`/`height` of the day it was sent and
+ * refetches this URL forever. Mail clients and Gmail's image proxy cache by URL,
+ * so swapping the bytes behind one both squashes the mark in every email already
+ * delivered (old attributes, new intrinsic size) and serves stale bytes into the
+ * new box until every cache expires. Changing the raster's dimensions or artwork
+ * means bumping the suffix here, leaving the previous file in place for the mail
+ * that still points at it.
+ */
+export const EMAIL_WORDMARK_SRC = '/brand/color/email/wordmark-v2.png'