2086282 - moz-box-item descriptions break lines in the middle of words (e.g. Turkish security warnings in Settings)

Status: VERIFIED FIXED

(Toolkit :: UI Widgets, defect)

Description

[Bryan Olsson [:bolsson]]

Attachment: resim.png

Steps to reproduce:

1. Use a Turkish (tr) build or language pack.
2. Trigger the Safe Browsing security warning in Settings > Privacy & Security (e.g. disable browser.safebrowsing.malware.enabled), optionally also the DNS over HTTPS warning.
3. Look at the "Security warnings" card.

Actual results:
The description text wraps in the middle of words instead of at spaces. For security-privacy-issue-warning-safe-browsing the word "kalma" is split into "kal" / "ma", and for the DoH warning "gizlemenize" is split into "gizlemen" / "ize". Screenshot attached.

Expected results:
Description text wraps at word boundaries and only breaks inside a word when a single word cannot fit on a line.

Cause:
Bug 2061358 added word-break: break-all to .description-wrapper in the shared moz-box-item.css. The Smart Form Fill edit sources dialog (ai-sff-tab-selector) passes the tab URL as the moz-box-item description, so the rule was there to keep long URLs from overflowing. Because it lives in the shared widget, it applies to every moz-box-item description, including the security warnings built in browser/components/preferences/config/privacy.mjs. break-all allows a break between any two characters even when the text would fit by wrapping at spaces, so ordinary sentences get split mid-word in all locales; it is most visible in languages with long words such as Turkish.

Suggested fix:
Replace word-break: break-all with overflow-wrap: anywhere in moz-box-item.css. URLs contain no spaces, so they still break wherever needed and will not overflow in the Smart Form Fill dialog, while normal text goes back to wrapping at word boundaries. This matches what moz-card and most other recent front-end components use for overflowing text.

Comment 1

[BugBot [:suhaib / :marco]]

Set release status flags based on info from the regressing bug 2061358

:giulia, since you are the author of the regressor, bug 2061358, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 2

[Bryan Olsson [:bolsson]]

Attachment: Bug 2086282 - Use overflow-wrap: anywhere for moz-box-item descriptions. r?#reusable-components-reviewers

word-break: break-all split ordinary words mid-word in every locale. overflow-wrap: anywhere still breaks long URLs when they would overflow.

Comment 3

[Giulia Cardieri (:giulia)]

Removing the needinfo since bolsson seems to have all needed information, if not, please let me know. Thanks!

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/0b1f2a76657e
https://hg.mozilla.org/integration/autoland/rev/819bcd14901d
Use overflow-wrap: anywhere for moz-box-item descriptions. r=reusable-components-reviewers,mkennedy

Comment 5

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/819bcd14901d

Comment 6

[BugBot [:suhaib / :marco]]

The patch landed in nightly and beta is affected.

:bolsson, please make an uplift decision for beta:

• For beta, nominate the patch for beta uplift approval if the fix should be included in this release, or set status-firefox160 to wontfix if the fix can wait for the next release.

Uplift requests can be submitted from Lando: D337316.

See Requesting an Uplift for documentation on how to request an uplift.

For more information, please visit BugBot documentation.

Comment 7

[Phabricator Automation]

firefox-beta Uplift Approval Request

• User impact if declined/Reason for urgency: Strings with long words will break in the middle of the word instead of in between words.
• Code covered by automated testing?: no
• Fix verified in Nightly?: yes
• Needs manual QE testing?: no
• Steps to reproduce for manual QE testing:
• Risk associated with taking this patch: low
• Explanation of risk level: Low risk because this is a one line CSS change that only affects line breaking in moz-box-item.
• String changes made/needed?: None
• Is Android affected?: no

Comment 8

[Bryan Olsson [:bolsson]]

Attachment: Bug 2086282 - Use overflow-wrap: anywhere for moz-box-item descriptions.

word-break: break-all split ordinary words mid-word in every locale. overflow-wrap: anywhere still breaks long URLs when they would overflow.

Original Revision: https://phabricator.services.mozilla.com/D337316

Comment 9

[Phabricator Automation]

firefox-release Uplift Approval Request

• User impact if declined/Reason for urgency: Strings with long words will break in the middle of the word instead of in between words.
• Code covered by automated testing?: no
• Fix verified in Nightly?: yes
• Needs manual QE testing?: no
• Steps to reproduce for manual QE testing:
• Risk associated with taking this patch: low
• Explanation of risk level: Low risk because this is a one line CSS change that only affects line breaking in moz-box-item.
• String changes made/needed?: None
• Is Android affected?: no

Comment 10

[Bryan Olsson [:bolsson]]

Attachment: Bug 2086282 - Use overflow-wrap: anywhere for moz-box-item descriptions.

word-break: break-all split ordinary words mid-word in every locale. overflow-wrap: anywhere still breaks long URLs when they would overflow.

Original Revision: https://phabricator.services.mozilla.com/D337316

Comment 11

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/080f9947a6ea
https://hg.mozilla.org/releases/mozilla-beta/rev/66b267e18155

Comment 12

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/96adc73ca178
https://hg.mozilla.org/releases/mozilla-release/rev/1722afe475d7

Comment 13

[Ryan VanderMeulen [:RyanVM]]

Added to the 159.0.1 relnotes.

Fixed text in some Settings descriptions, such as security warnings, breaking in the middle of words.

Comment 14

[Bogdan Maris, Desktop Test Engineering]

Reproduced the initial issue described in comment 0 using an old Nightly (.tr) build before the fix, verified that using latest Nightly 161.0a1, Beta 160.0b4 and Release 159.0.1 this is fixed, the text for those particular options now wrap at word boundaries. Tested across platforms Windows 11, macOS 13 and Fedora 44