From c69be1f943bbb01347a1b0b86852390816c2186f Mon Sep 17 00:00:00 2001 From: Phillip Carter Date: Fri, 15 May 2026 05:44:49 -0700 Subject: [PATCH] render --- src/lib/__tests__/emailHtml.test.ts | 7 +++++++ src/lib/emailHtml.ts | 3 +++ 2 files changed, 10 insertions(+) diff --git a/src/lib/__tests__/emailHtml.test.ts b/src/lib/__tests__/emailHtml.test.ts index 1ef7d24..0f9b9b6 100644 --- a/src/lib/__tests__/emailHtml.test.ts +++ b/src/lib/__tests__/emailHtml.test.ts @@ -42,6 +42,13 @@ describe("prepareHtml", () => { assert.ok(result.includes("img[width]{display:block!important"), "inline images should stack instead of forcing a giant row"); }); + it("emulates common responsive email helper classes in readable mobile mode", () => { + const result = prepareHtml("
x"); + assert.ok(result.includes('table[class~="flexible"]{width:100%!important'), "flexible tables should expand to the available width"); + assert.ok(result.includes('[class~="hide"]{display:none!important'), "gmail spacer rows should be hidden in mobile readable mode"); + assert.ok(result.includes('[class~="db"]{display:block!important'), "db helper classes should become block elements"); + }); + it("listens for parent width messages from EmailBody", () => { const result = prepareHtml("hi"); assert.ok(result.includes("iframe-parent-width"), "should accept parent width postMessages"); diff --git a/src/lib/emailHtml.ts b/src/lib/emailHtml.ts index b74bde7..b963411 100644 --- a/src/lib/emailHtml.ts +++ b/src/lib/emailHtml.ts @@ -103,6 +103,9 @@ export function prepareHtml( 'html[data-mobile-friendly="true"] table,html[data-mobile-friendly="true"] table[width]{width:100%!important;max-width:100%!important;table-layout:auto!important}', 'html[data-mobile-friendly="true"] td,html[data-mobile-friendly="true"] th,html[data-mobile-friendly="true"] td[width],html[data-mobile-friendly="true"] th[width]{width:auto!important;max-width:100%!important;min-width:0!important}', 'html[data-mobile-friendly="true"] img,html[data-mobile-friendly="true"] img[width]{display:block!important;max-width:100%!important;width:auto!important;height:auto!important}', + 'html[data-mobile-friendly="true"] table[class~="flexible"]{width:100%!important;max-width:100%!important}', + 'html[data-mobile-friendly="true"] [class~="hide"]{display:none!important;width:0!important;height:0!important;max-width:0!important;max-height:0!important;min-width:0!important;overflow:hidden!important;padding:0!important;font-size:0!important;line-height:0!important}', + 'html[data-mobile-friendly="true"] [class~="db"]{display:block!important}', 'html[data-mobile-friendly="true"] pre,html[data-mobile-friendly="true"] code,html[data-mobile-friendly="true"] blockquote{overflow-wrap:anywhere;word-break:break-word}', ].join(""); -- 2.51.2