WorkRoot/WRNexusJS
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(email-renderer): stack AMP columns at mobile widths
Quality / quality (ubuntu-latest) (push) Failing after 1s
Details
Quality / quality (windows-latest) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Clintchiz committed 2026-09-05 13:21:56 +05:30
1 parent 8e51b28583
commit 2f735b267b
4 files changed
+10 -5
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/email-renderer/src/blocks.ts
+2 -2
View File
@@ -204,7 +204,7 @@ export const columnsBlock = defineBlock({
node,
),
ampEmail: ({ node, slots }) =>
emailCell(`<table role="presentation" width="100%"><tr>${slots.columns}</tr></table>`, node),
emailCell(`<table role="presentation" width="100%"><tr class="wrn-columns">${slots.columns}</tr></table>`, node),
mjml: ({ slots }) => slots.columns,
},
textRenderer: ({ slots }) => slots.columns,
@@ -234,7 +234,7 @@ export const columnBlock = defineBlock({
emailHtml: ({ node, slots }) =>
`<td data-block-id="${html(node.id)}" class="wrn-column" width="${html(attrs(node).width)}" valign="top"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">${slots.content}</table></td>`,
ampEmail: ({ node, slots }) =>
`<td width="${html(attrs(node).width)}" valign="top"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">${slots.content}</table></td>`,
`<td class="wrn-column" width="${html(attrs(node).width)}" valign="top"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">${slots.content}</table></td>`,
mjml: ({ node, slots }) =>
`<mj-column width="${html(attrs(node).width)}">${slots.content}</mj-column>`,
},
packages/email-renderer/src/email.ts
+1 -1
View File
@@ -81,7 +81,7 @@ const head = (document: BlockDocument, body: string, direction: "ltr" | "rtl") =
};
const ampHead = (document: BlockDocument, body: string, direction: "ltr" | "rtl") => {
const props = document.root.props as Record<string, unknown>;
const css = `.marketing-image img{object-fit:contain}body{margin:0;color:${props.textColor ?? "#111827"};font-family:${props.fontFamily ?? "Arial, sans-serif"}}a{color:${props.linkColor ?? "#2563eb"}}.email-bg{background:${props.background ?? "#f3f4f6"}}.email-body{max-width:${props.width ?? "600"}px;width:100%;background:${props.contentBackground ?? "#ffffff"}}`;
const css = `@media only screen and (max-width:480px){.email-body .wrn-columns{display:block}.email-body .wrn-column{display:block;width:100%}}.marketing-image img{object-fit:contain}body{margin:0;color:${props.textColor ?? "#111827"};font-family:${props.fontFamily ?? "Arial, sans-serif"}}a{color:${props.linkColor ?? "#2563eb"}}.email-bg{background:${props.background ?? "#f3f4f6"}}.email-body{max-width:${props.width ?? "600"}px;width:100%;background:${props.contentBackground ?? "#ffffff"}}`;
return `<!doctype html><html amp4email data-css-strict lang="${escapeHtml(document.meta.lang)}" dir="${direction}"><head><meta charset="utf-8"><script async src="https://cdn.ampproject.org/v0.js"></script><style amp4email-boilerplate>body{visibility:hidden}</style><style amp-custom>${css}.section{padding:24px}.button{background:#2563eb;border-radius:6px;color:#fff;display:inline-block;font-weight:700;padding:12px 20px;text-decoration:none}.spacer{height:24px}</style></head><body>${body}</body></html>`;
};