fix(email-viewer): stop shattering table cells with word-break: break-word#342
Open
shukiv wants to merge 1 commit into
Open
fix(email-viewer): stop shattering table cells with word-break: break-word#342shukiv wants to merge 1 commit into
shukiv wants to merge 1 commit into
Conversation
…-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 bulwarkmail#341.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue
Closes #341.
What changed
components/email/email-viewer.tsx:
```diff
```
Why
`word-break: break-word` is a non-standard alias that some engines treat as `break-all` — it breaks ordinary words at arbitrary character boundaries, even when the word would fit if the column auto-expanded. The result for HTML-email tables with short Hebrew/Arabic/CJK headers (or long English strings) is column content collapsing to one glyph per row.
`overflow-wrap: anywhere` is the spec-blessed equivalent of "break long words ONLY when they would otherwise overflow", and it also relaxes the cell's min-content width so RTL tables no longer force horizontal scroll.
The rest of the iframe CSS already sets `overflow-wrap: break-word` on `body` and the table, so swapping the td/th rule keeps the same overflow semantics without re-introducing break-all behaviour.
Test plan