From c71d08bb5cf4e21c8d8b6bdea859ca3c3d3a597f Mon Sep 17 00:00:00 2001
From: jamey <jamey@server.jamey.stream>
Date: Sat, 28 Feb 2026 23:39:48 +0000
Subject: [PATCH] fix HTML email template for mobile rendering

Add text-size-adjust, word-break, responsive media query, MSO
conditionals, and proper table attributes so emails render at
full size with correct wrapping on mobile clients.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 lib/berrypod/newsletter/notifier.ex | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)
diff --git a/lib/berrypod/newsletter/notifier.ex b/lib/berrypod/newsletter/notifier.ex
index c0fdf9d..73a19ad 100644
--- a/lib/berrypod/newsletter/notifier.ex
+++ b/lib/berrypod/newsletter/notifier.ex
@@ -138,29 +138,46 @@ defmodule Berrypod.Newsletter.Notifier do
 
     """
     <!DOCTYPE html>
-    <html lang="en">
+    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
     <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <meta http-equiv="X-UA-Compatible" content="IE=edge">
+      <meta name="x-apple-disable-message-reformatting">
       <title>#{esc(shop_name)}</title>
+      <style>
+        body, table, td { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+        table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
+        a { word-break: break-all; }
+        @media only screen and (max-width: 620px) {
+          .email-container { width: 100% !important; }
+          .email-padding { padding: 16px !important; }
+          .email-header { padding: 16px 16px 12px !important; }
+        }
+      </style>
+      <!--[if mso]>
+      <style>body { font-family: Arial, sans-serif; }</style>
+      <![endif]-->
     </head>
-    <body style="margin: 0; padding: 0; background-color: #f3f4f6; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
-      <table role="presentation" width="100%" style="background-color: #f3f4f6;">
+    <body style="margin: 0; padding: 0; background-color: #f3f4f6; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; word-break: break-word;">
+      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color: #f3f4f6;">
         <tr>
           <td align="center" style="padding: 32px 16px;">
-            <table role="presentation" width="100%" style="max-width: 560px; background-color: #ffffff; border-radius: 8px; overflow: hidden;">
+            <!--[if mso]><table role="presentation" width="560" cellpadding="0" cellspacing="0"><tr><td><![endif]-->
+            <table role="presentation" class="email-container" width="560" cellpadding="0" cellspacing="0" style="max-width: 560px; width: 100%; background-color: #ffffff; border-radius: 8px;">
               <tr>
-                <td style="padding: 24px 32px 16px; border-bottom: 1px solid #e5e7eb;">
+                <td class="email-header" style="padding: 24px 32px 16px; border-bottom: 1px solid #e5e7eb;">
                   <strong style="font-size: 18px; color: #111827;">#{esc(shop_name)}</strong>
                 </td>
               </tr>
               <tr>
-                <td style="padding: 24px 32px 32px; color: #374151; font-size: 16px; line-height: 1.6;">
+                <td class="email-padding" style="padding: 24px 32px 32px; color: #374151; font-size: 16px; line-height: 1.6;">
                   #{content}
                   #{footer}
                 </td>
               </tr>
             </table>
+            <!--[if mso]></td></tr></table><![endif]-->
           </td>
         </tr>
       </table>
