Let mail wider than the pane scroll sideways (ihasmail #31)

(cherry picked from commit 14680d0e1b2cc966aa840a45e73b238322ed5e17)

web/src/lib/text/__tests__/html.test.ts

@@ -387,3 +387,16 @@ describe("the containment that mail CSS cannot override", () => {
     expect(rule).toMatch(/contain\s*:\s*layout/);
   });
 });
+
+describe("mail wider than the reading pane", () => {
+  /*
+   * The root keeps `contain: content`, which clips what overflows, so without
+   * a scroll the right side of a min-width table was simply gone, worst on a
+   * phone (Gitea issue #24). jsdom does no layout, so this pins the rule.
+   */
+  it("scrolls sideways instead of being cut off", () => {
+    const root = EMAIL_BASE_CSS.match(/\.ihm-email-root \{([^}]*)\}/)?.[1] ?? "";
+    expect(root).toMatch(/contain:\s*content/);
+    expect(root).toMatch(/overflow-x:\s*auto/);
+  });
+});

web/src/lib/text/html.ts

@@ -287,7 +287,10 @@ export function sanitizeEditorHtml(input: string): string {
 export const EMAIL_BASE_CSS = `
 :host { display:block; color-scheme: light; }
 :host(.themed) { color-scheme: inherit; }
-.ihm-email-root { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; color:#1f2937; background:#fff; padding:16px; border-radius:8px; overflow-wrap:anywhere; word-break:normal; contain: content; }
+/* contain: content clips what overflows, so mail built wider than the pane --
+   a min-width table, a nowrap cell -- was cut off with no way to reach the
+   rest. It scrolls sideways instead (Gitea issue #24). */
+.ihm-email-root { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; color:#1f2937; background:#fff; padding:16px; border-radius:8px; overflow-wrap:anywhere; word-break:normal; contain: content; overflow-x:auto; overflow-y:hidden; }
 .ihm-email-root img { max-width:100%; height:auto; }
 .ihm-email-root img[data-ihm-blocked] { display:inline-block; min-width:16px; min-height:16px; background:#f1f5f9 repeating-linear-gradient(45deg,#e2e8f0 0 6px,#f1f5f9 6px 12px); border:1px dashed #cbd5e1; }
 .ihm-email-root table { max-width:100%; }