fix(email-renderer): stack columns only at compact widths

packages/email-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/email-renderer",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "type": "module",
   "description": "WRNexus block email renderers with HTML, text, AMP Email, and MJML interoperability.",
   "exports": {

packages/email-renderer/src/email.ts

@@ -65,7 +65,7 @@ export const emailKind = defineDocumentKind({
   rootTypes: ["layout.email-document"],
   blocks: emailCoreBlocks,
   variables: { recipientName: "string", unsubscribeUrl: "string", organizationAddress: "string" },
-  breakpoints: { compact: 620 },
+  breakpoints: { compact: 480 },
   capabilities: ["email-html", "plain-text", "amp-email", "mjml"],
   targets: ["emailHtml", "plainText", "ampEmail", "mjml"],
   limits: { ...DEFAULT_LIMITS, maxOutputBytes: 2_000_000 },
@@ -77,7 +77,7 @@ const head = (document: BlockDocument, body: string, direction: "ltr" | "rtl") =
   const textColor = escapeHtml(props.textColor ?? "#111827");
   const linkColor = escapeHtml(props.linkColor ?? "#2563eb");
   const fontFamily = escapeHtml(props.fontFamily ?? "Arial, sans-serif");
-  return `<!doctype html><html lang="${escapeHtml(document.meta.lang)}" dir="${direction}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="x-apple-disable-message-reformatting"><meta name="color-scheme" content="light dark"><title>${escapeHtml(document.meta.subject)}</title><style>a{color:${linkColor}}@media only screen and (max-width:620px){.wrn-email{width:100%!important}.wrn-columns{display:block!important}.wrn-column{display:block!important;width:100%!important}}</style></head><body style="margin:0;padding:0;color:${textColor};font-family:${fontFamily};">${document.meta.preheader ? `<div style="display:none;max-height:0;overflow:hidden;opacity:0;">${escapeHtml(document.meta.preheader)}</div>` : ""}${body}</body></html>`;
+  return `<!doctype html><html lang="${escapeHtml(document.meta.lang)}" dir="${direction}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="x-apple-disable-message-reformatting"><meta name="color-scheme" content="light dark"><title>${escapeHtml(document.meta.subject)}</title><style>a{color:${linkColor}}@media only screen and (max-width:480px){.wrn-email{width:100%!important}.wrn-columns{display:block!important}.wrn-column{display:block!important;width:100%!important}}</style></head><body style="margin:0;padding:0;color:${textColor};font-family:${fontFamily};">${document.meta.preheader ? `<div style="display:none;max-height:0;overflow:hidden;opacity:0;">${escapeHtml(document.meta.preheader)}</div>` : ""}${body}</body></html>`;
 };
 const ampHead = (document: BlockDocument, body: string, direction: "ltr" | "rtl") =>
   `<!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>.email-body{max-width:600px;width:100%}.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>`;

packages/email-renderer/test/email.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, test } from "bun:test";
 import { parse, type DefaultTreeAdapterMap } from "parse5";
 import {
   emailCoreBlocks,
+  emailKind,
   renderEmail,
   validateAmpEmail,
   validateMjml,
@@ -56,6 +57,14 @@ const document: BlockDocument = {
 };
 
 describe("email renderer", () => {
+  test("responsive stacking begins below the desktop email width", async () => {
+    const rendered = await renderEmail(document);
+    expect(rendered.ok).toBe(true);
+    if (!rendered.ok) return;
+    expect(emailKind.breakpoints.compact).toBe(480);
+    expect(rendered.value.parts.html.content).toContain("max-width:480px");
+    expect(rendered.value.parts.html.content).not.toContain("max-width:620px");
+  });
   test("countdown URLs are derived for HTML AMP and MJML without mutating the document", async () => {
     const draft = structuredClone(document);
     draft.root.slots.content[0]!.slots.content = [{id:"timer",type:"content.countdown",version:1,props:{label:"Offer ends",deadline:"2026-10-01T00:00:00Z",fallback:"Offer ended"},styles:{},slots:{}}];