feat(webmail): keep a message's own stylesheet so designed mail renders as sent

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

services/webmail/src/lib/emailBody.ts

@@ -55,9 +55,9 @@ export function buildReaderDocument(bodyHtml: string): string {
 <style>
   html { background:#ffffff; }
   body {
-    margin:0; padding:20px; background:#ffffff; color:#1e293b;
+    margin:0; padding:24px 28px; background:#ffffff; color:#1d1d1f;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    font-size:14px; line-height:1.6;
+    font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
     /* Mail is written against desktop widths. Without these a newsletter
        pushes a horizontal scrollbar across its own content. */
     overflow-wrap:anywhere; word-break:break-word;
@@ -65,8 +65,9 @@ export function buildReaderDocument(bodyHtml: string): string {
   img, video, table, pre { max-width:100% !important; }
   img { height:auto; }
   table { border-collapse:collapse; }
-  /* A layout table with a fixed pixel width is the usual overflow culprit. */
-  table[width] { width:auto !important; max-width:100% !important; }
+  /* A layout table keeps the width its author gave it - forcing "auto" is what
+     collapsed designed messages into a narrow column. max-width above is what
+     stops one from overflowing a small screen. */
   blockquote {
     margin:0 0 0 4px; padding-left:12px;
     border-left:3px solid #cbd5e1; color:#475569;