diff --git a/packages/email-renderer/package.json b/packages/email-renderer/package.json
index 5c7cca90..9f3f2712 100644
--- a/packages/email-renderer/package.json
+++ b/packages/email-renderer/package.json
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/email-renderer",
- "version": "0.1.17",
+ "version": "0.1.18",
"type": "module",
"description": "WRNexus block email renderers with HTML, text, AMP Email, and MJML interoperability.",
"exports": {
diff --git a/packages/email-renderer/src/blocks.ts b/packages/email-renderer/src/blocks.ts
index 232cbb1b..090b02e9 100644
--- a/packages/email-renderer/src/blocks.ts
+++ b/packages/email-renderer/src/blocks.ts
@@ -204,7 +204,7 @@ export const columnsBlock = defineBlock({
node,
),
ampEmail: ({ node, slots }) =>
- emailCell(`
`, node),
+ emailCell(``, node),
mjml: ({ slots }) => slots.columns,
},
textRenderer: ({ slots }) => slots.columns,
@@ -234,7 +234,7 @@ export const columnBlock = defineBlock({
emailHtml: ({ node, slots }) =>
` | `,
ampEmail: ({ node, slots }) =>
- ` | `,
+ ` | `,
mjml: ({ node, slots }) =>
`${slots.content}`,
},
diff --git a/packages/email-renderer/src/email.ts b/packages/email-renderer/src/email.ts
index 2c8df9c1..a26a86b4 100644
--- a/packages/email-renderer/src/email.ts
+++ b/packages/email-renderer/src/email.ts
@@ -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;
- 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 `${body}`;
};
diff --git a/packages/email-renderer/test/email.test.ts b/packages/email-renderer/test/email.test.ts
index ddbad1da..dcfe5790 100644
--- a/packages/email-renderer/test/email.test.ts
+++ b/packages/email-renderer/test/email.test.ts
@@ -62,13 +62,18 @@ describe("email renderer", () => {
const draft=structuredClone(document);
const content=draft.root.slots.content[0]!.slots.content;
draft.root.slots.content[0]!.slots.content=[{id:"columns",type:"layout.columns",version:1,props:{},styles:{},slots:{columns:Array.from({length:count},(_,index)=>({id:`column-${index}`,type:"layout.column",version:1,props:{width:`${100/count}%`},styles:{},slots:{content:index===0?content:[]}}))}}];
- const result=await renderEmail(draft,{mjml:true});
+ const result=await renderEmail(draft,{mjml:true,amp:true});
expect(result.ok).toBe(true);
if(!result.ok)continue;
const mjml=result.value.exports!.mjml!;
expect(mjml.match(/ {