Break spaces when wrapping content in diffs.
Review Request #11033 — Created May 21, 2020 and updated
Our diff viewer styling used a combination
overflow-wrapto force wrapping of content in diffs. This does a
pretty good job, but if there's a line with a very large number of
spaces, browsers will keep those spaces grouped together and force the
width of the diff viewer to be too wide.
This updates our code to now optimistically use
break-spaces, which is
pre-wrapbut will also break spaces. While this isn't supported
on all browsers, it is supported on most, and we fall back to the
It also fixes the value for
overflow-wrapto use the correct mode (the
original mode used wasn't actually valid for this property, and caused
us to fall back on
word-break's behavior exclusively).
Tested with some sample diffs from a customer who hit this issue. Verified
that this fixed the line wrapping and table width issues we've heard about.
Tested on Chrome, Firefox, and Safari.