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:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user