Page MenuHomePhabricator

Mobile diff warnings do not wrap properly
Closed, ResolvedPublic2 Estimated Story Points



First found in T101796: MobileDiff appears strangely empty if previous revision is hidden

Steps to recreate

  1. Go to any mobile diff page with a warning message (

warning messages wrap properly

text wrapping is off

Screen Shot 2018-02-13 at 12.30.42 PM.png (739×388 px, 54 KB)

Developer notes

The problem is warning box and diff share a common ancestor. Thus the warning box inherits rules from the diff.

  • Warning boxes should wrap properly
  • Diffs should continue to wrap as they do

Event Timeline

Should we make the current selector more specific to the diff lines only instead of applying to the general div?

#mw-mf-diffarea {
    word-break: break-all;
ovasileva set the point value for this task to 2.Feb 14 2018, 5:15 PM

Change 413140 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/extensions/MobileFrontend@master] Fixing word-wrap on mobile diff pages

I looked at the origins of this change:
and the rationale was just "Otherwise long lines break the viewport".

That problem is not limited to just the diff lines, so @Jhernandez I don't think limiting the selector here is necessary.
The solution is to provide hyphens or word-breaks where appropriate/available, which the patch above (based on this article ) does.
Hurra CSS!

I don't see why we can't provide nice hyphens/word-breaks everywhere! 🤔.

Niedzielski added a subscriber: Niedzielski.

Assigning to @Jhernandez for insights into this approach and code review^^^

Jdlrobson added subscribers: Volker_E, Jdlrobson.

There's some good feedback from @Volker_E that warrants additional work.

Saved by the bell! Back to the owner to reflect reality

Change 413140 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Improve word wrapping on mobile diff pages

ovasileva added a subscriber: ABorbaWMF.

over to you @ABorbaWMF - this will be live and ready for testing on Thursday. Recreation steps are in the description.