Page MenuHomePhabricator

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

Description

Background

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 (https://en.m.wikipedia.org/wiki/Special:MobileDiff/666058325)

Expected:
warning messages wrap properly

Observed:
text wrapping is off

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

Details

Related Gerrit Patches:
mediawiki/extensions/MobileFrontend : masterImprove word wrapping on mobile diff pages

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 13 2018, 11:31 AM
Jdlrobson updated the task description. (Show Details)

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
Jdrewniak moved this task from To Do to Doing on the Readers-Web-Kanbanana-Board-Old board.

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

https://gerrit.wikimedia.org/r/413140

I looked at the origins of this change:
https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/commit/bbf03df47d97da82e5345bc4c6f4d230131edc88
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!

p.s.
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^^^

Niedzielski added a subscriber: Jdrewniak.
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

https://gerrit.wikimedia.org/r/413140

ovasileva reassigned this task from Jdrewniak to ABorbaWMF.Feb 26 2018, 6:04 PM
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.

Looks good on production




ovasileva closed this task as Resolved.Mar 6 2018, 1:05 PM