fix: prevent HTML email content from being cut off horizontally (#288 )

HTML emails often use fixed-width tables (e.g. <table width="600">) that exceed the WebView viewport, causing the right portion of the email to be clipped with no way to scroll. Fix by injecting CSS that: - Adds `overflow-x: hidden` to body so wide content does not escape the viewport - Sets `max-width: 100%` on all elements (via `*`) to scale down wide containers - Forces `table { width: 100%; }` so fixed-pixel-width email tables reflow to fit - Adds `td/th { overflow-wrap/word-break }` for wrapping in table cells - Adds `pre { white-space: pre-wrap; }` so pre-formatted text wraps instead of stretching the page Adds a regression test that asserts all four CSS rules are present in the generated HTML. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-27 19:50:30 +02:00
2 changed files with 19 additions and 2 deletions
@@ -31,10 +31,13 @@ String buildEmailHtml(String htmlBody, {bool loadRemoteImages = false}) {
 <meta name="color-scheme" content="light">
 <meta http-equiv="Content-Security-Policy" content="$csp">
 <style>
-body { margin: 0; padding: 0; font-family: sans-serif; word-break: break-word; color-scheme: light; background-color: #ffffff; color: #000000; }
+body { margin: 0; padding: 0; font-family: sans-serif; word-break: break-word; overflow-x: hidden; color-scheme: light; background-color: #ffffff; color: #000000; }
 img { max-width: 100%; height: auto; }
 a { color: #1976D2; }
-* { box-sizing: border-box; }
+* { box-sizing: border-box; max-width: 100%; }
+table { width: 100%; border-collapse: collapse; }
+td, th { overflow-wrap: break-word; word-break: break-word; }
+pre { white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
 </style>
 </head>
 <body>
@@ -41,6 +41,20 @@ void main() {
      expect(html, contains('https: http: data: blob:'));
      _expectLightMode(html);
    });
+
+    test('prevents horizontal overflow so wide HTML emails are not cut off',
+        () {
+      final html =
+          buildEmailHtml('<table width="600"><tr><td>x</td></tr></table>');
+      // Body clips overflow so fixed-width email tables don't escape the viewport.
+      expect(html, contains('overflow-x: hidden'));
+      // Tables are forced to full viewport width so fixed pixel widths don't overflow.
+      expect(html, contains('table { width: 100%'));
+      // All elements are capped at viewport width via max-width.
+      expect(html, contains('max-width: 100%'));
+      // Pre-formatted text wraps instead of stretching the page.
+      expect(html, contains('white-space: pre-wrap'));
+    });
  });

  // On Linux (the test host) the widget falls back to plain text extracted via