Fix breaking long lines with tabs in diffs in Firefox.

Review Request #14207 — Created Oct. 17, 2024 and updated

Information

Review Board
release-7.x

Reviewers

Firefox's support for word-break: break-all is a bit broken itself. It
seems to have some long-standing known failures (as reported in Bugzilla
and demonstrated in regression test suites), and the one that was
brought to our attention is that it does the wrong thing when working
with pre-formatted text with tabstops.

What ends up happening is that lines with tabs end up failing to
overflow soon enough, pushing the rest of the content off the screen. We
see this in diffs where the first column with tabs ends up taking the
majority of the width of the page.

In all other browsers, this behaves as expected, and in fact if we
change this to word-break: break-word instead of break-all, we get
the right behavior.

We still want break-all more generally, so we now include a rule
specifically for tabs to use break-word instead. This ensures proper
breaks and wrapping on Firefox and on all other major browsers.

Verified with some code provided by a customer. Without this fix,
lines fail to break when they should, causing layout problems, when
viewed in Firefox (across a wide range of versions). With the fix,
diffs look as they should.

Summary ID
Fix breaking long lines with tabs in diffs in Firefox.
Firefox's support for `word-break: break-all` is a bit broken itself. It seems to have some long-standing known failures (as reported in Bugzilla and demonstrated in regression test suites), and the one that was brought to our attention is that it does the wrong thing when working with pre-formatted text with tabstops. What ends up happening is that lines with tabs end up failing to overflow soon enough, pushing the rest of the content off the screen. We see this in diffs where the first column with tabs ends up taking the majority of the width of the page. In all other browsers, this behaves as expected, and in fact if we change this to `word-break: break-word` instead of `break-all`, we get the right behavior. We still want `break-all` more generally, so we now include a rule specifically for tabs to use `break-word` instead. This ensures proper breaks and wrapping on Firefox and on all other major browsers.
c430b742c82adfc178dbc02dba7ca94fc8668c59
Checks run (2 succeeded)
flake8 passed.
JSHint passed.