fix(email-viewer): stop shattering table cells with word-break: break-word

The global rule

    td, th { word-break: break-word; }

was breaking HTML-email tables one glyph per row whenever a column was
narrow, especially for Hebrew/Arabic/CJK headers and long English
strings. The non-standard `word-break: break-word` keyword behaves
like `break-all` in some engines, splitting words at arbitrary
character boundaries even when the word would fit if the column auto-
expanded.

`overflow-wrap: break-word` is already set on body/table, so the rule
only needs to add min-content relaxation for cells. `overflow-wrap:
anywhere` does exactly that without re-introducing break-all
behaviour.

Repro: any transactional Hebrew/RTL order-summary email — each header
(`מוצר`, `כמות`, `מחיר`) collapses to one glyph per row. After the fix
they render on a single line.

Closes #341.
This commit is contained in:
Shuki Vaknin
2026-05-28 18:32:06 +02:00
committed by Linus Rath
parent 7d1fb73290
commit 82be047708
+1 -1
View File
@@ -2866,7 +2866,7 @@ export function EmailViewer({
img { max-width: 100% !important; height: auto !important; } img { max-width: 100% !important; height: auto !important; }
a { color: #1a73e8; } a { color: #1a73e8; }
table { max-width: 100% !important; table-layout: auto; overflow-wrap: break-word; } table { max-width: 100% !important; table-layout: auto; overflow-wrap: break-word; }
td, th { word-break: break-word; } td, th { overflow-wrap: anywhere; }
pre { white-space: pre-wrap; word-wrap: break-word; } pre { white-space: pre-wrap; word-wrap: break-word; }
${wordHtmlCSS} ${wordHtmlCSS}
${darkModeCSS} ${darkModeCSS}