Problem
Long lines in diffs are not broken. This breaks the default visual diff display.
Acceptance criteria
- Add css rule to #mw-mf-diffarea on diff pages
word-break: break-all;
Original report
OS: Android 5.1.0
App: Chrome 58.0.3029.83
Logged in.
Using the diff screen.
Issues:
- The "Poděkovat" (Thanks) button can be partially or fully pushed out of the screen if the diff contains some long, unbroken line/URL (which escapes from the screen too).
- The "Poděkovat" (Thanks) button has almost no space between the icon and the text.
- The pop-up can cover up a big chunk of the screen while it cannot be collapsed or closed. It has probably some feature implemented, which should roll it down/under when rolling the screen, but this is very unreliable. It can persist or it can roll/fall deep below the page footer.
Examples (no luck with direct upload of pictures, so stored them on Commons):
https://en.m.wikipedia.org/wiki/Special:MobileDiff/787296831
See https://commons.wikimedia.org/wiki/File:Mobile_diff_screen_01.jpg for picture. Note that the "Poděkovat" button is partially pushed out of the screen. No space between the icon and the word "Poděkovat".
https://cs.m.wikipedia.org/wiki/Speci%C3%A1ln%C3%AD:Mobiln%C3%AD_rozd%C3%ADl/14558618
See https://commons.wikimedia.org/wiki/File:Mobile_diff_screen_02.jpg for picture. Note that the pop-up is deep below the page footer.
QA steps
- Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:MobileDiff/363602 on a mobile device
- Verify that you cannot horizontal scroll
