fix(email-renderer): constrain images to available content width

packages/email-renderer/package.json

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

packages/email-renderer/src/blocks.ts

@@ -49,7 +49,7 @@ const marketingImage = (node: BlockNode, target: "html" | "amp" | "mjml") => {
   const src = html(p.image), alt = html(p.title);
   if (target === "amp") return `<amp-img class="marketing-image" src="${src}" alt="${alt}" width="${width}" height="${height}" layout="responsive"></amp-img>`;
   if (target === "mjml") return `<mj-image src="${src}" alt="${alt}" width="${width}px" />`;
-  return `<img src="${src}" alt="${alt}" width="${width}" style="display:block;height:auto;max-width:100%;" />`;
+  return `<img src="${src}" alt="${alt}" width="${width}" style="display:block;height:auto;width:100%;max-width:${width}px;" />`;
 };
 const styleBase = (node: BlockNode, key: string) => {
   const value = (node.styles as Record<string, unknown>)[key];
@@ -319,7 +319,7 @@ export const imageBlock = leaf(
   {
     emailHtml: ({ node }) =>
       emailCell(
-        `<img src="${html(attrs(node).src)}" alt="${html(attrs(node).decorative ? "" : attrs(node).alt)}" width="${html(attrs(node).width)}" height="${html(attrs(node).height)}" style="border:0;display:block;height:auto;max-width:100%;" />`,
+        `<img src="${html(attrs(node).src)}" alt="${html(attrs(node).decorative ? "" : attrs(node).alt)}" width="${html(attrs(node).width)}" height="${html(attrs(node).height)}" style="border:0;display:block;height:auto;width:100%;max-width:${html(attrs(node).width)}px;" />`,
         node,
       ),
     ampEmail: ({ node }) =>
@@ -401,7 +401,7 @@ export const videoBlock = leaf(
     height: string({ default: "338" }),
   }) as never,
   {
-    emailHtml: ({ node }) => emailCell(`<a href="${html(attrs(node).href)}" aria-label="${html(attrs(node).title)}"><img src="${html(attrs(node).thumbnail)}" alt="${html(attrs(node).alt)}" width="${html(attrs(node).width)}" height="${html(attrs(node).height)}" style="border:0;display:block;height:auto;max-width:100%;" /></a>`, node),
+    emailHtml: ({ node }) => emailCell(`<a href="${html(attrs(node).href)}" aria-label="${html(attrs(node).title)}"><img src="${html(attrs(node).thumbnail)}" alt="${html(attrs(node).alt)}" width="${html(attrs(node).width)}" height="${html(attrs(node).height)}" style="border:0;display:block;height:auto;width:100%;max-width:${html(attrs(node).width)}px;" /></a>`, node),
     ampEmail: ({ node }) => emailCell(`<a href="${html(attrs(node).href)}" aria-label="${html(attrs(node).title)}"><amp-img src="${html(attrs(node).thumbnail)}" alt="${html(attrs(node).alt)}" width="${html(attrs(node).width)}" height="${html(attrs(node).height)}" layout="responsive"></amp-img></a>`, node),
     mjml: ({ node }) => `<mj-image href="${html(attrs(node).href)}" src="${html(attrs(node).thumbnail)}" alt="${html(attrs(node).alt)}" width="${html(attrs(node).width)}px" />`,
   },

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

@@ -54,6 +54,7 @@ test("product and RSS images survive HTML, AMP and strict MJML exports", async (
     const result = await renderEmail(document(type, props), { amp: true, mjml: true });
     expect(result.ok).toBe(true);
     if (!result.ok) continue;
+    expect(result.value.parts.html.content).toContain('width:100%;max-width:320px;');
     for (const output of [
       result.value.parts.html.content,
       result.value.parts.amp?.content,