Break spaces when wrapping content in diffs.

Review Request #11033 — Created May 21, 2020 and updated

chipx86
Review Board
release-3.0.x
reviewboard

Our diff viewer styling used a combination pre-wrap, word-break, and
overflow-wrap to 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
like pre-wrap but will also break spaces. While this isn't supported
on all browsers, it is supported on most, and we fall back to the
existing pre-wrap behavior anyway.

It also fixes the value for overflow-wrap to 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.

Summary
Break spaces when wrapping content in diffs.
Checks run (2 succeeded)
flake8 passed.
JSHint passed.
david
  1. Ship It!
  2. 
      
Loading...