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

Assigned To

Authored By

	ovasileva
	Feb 13 2018, 11:31 AM

Description

Background

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

Steps to recreate

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

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

Details

	Subject	Repo	Branch	Lines +/-
	Improve word wrapping on mobile diff pages	mediawiki/extensions/MobileFrontend	master	+2 -1

Customize query in gerrit

Related Objects

Mentioned In: T101796: MobileDiff appears strangely empty if previous revision is hidden
Mentioned Here: T101796: MobileDiff appears strangely empty if previous revision is hidden

Event Timeline

ovasileva created this task.Feb 13 2018, 11:31 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 13 2018, 11:31 AM

ovasileva triaged this task as Medium priority.Feb 13 2018, 11:31 AM

ovasileva mentioned this in T101796: MobileDiff appears strangely empty if previous revision is hidden.

ovasileva moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.Feb 13 2018, 4:14 PM

Jdlrobson added a project: good first task.Feb 13 2018, 6:54 PM

Jdlrobson updated the task description. (Show Details)

Jdlrobson moved this task from Needs Prioritization to Triaged but Future on the Web-Team-Backlog board.

Jdlrobson moved this task from Triaged but Future to Upcoming on the Web-Team-Backlog board.Feb 14 2018, 5:07 PM

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

ovasileva added a project: Readers-Web-Kanbanana-Board-Old.Feb 20 2018, 5:12 PM

Jdrewniak claimed this task.Feb 21 2018, 10:54 AM

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

gerritbot added a project: Patch-For-Review.Feb 21 2018, 11:32 AM

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! 🤔.

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

• Niedzielski reassigned this task from Jdrewniak to • Jhernandez.Feb 21 2018, 4:26 PM

• Niedzielski added a subscriber: Jdrewniak.

ovasileva moved this task from Upcoming to 2017-18 Q3 on the Web-Team-Backlog board.Feb 21 2018, 6:34 PM

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

ReleaseTaggerBot added a project: MW-1.31-release-notes (WMF-deploy-2018-02-27 (1.31.0-wmf.23)).Feb 23 2018, 9:00 PM

Jdlrobson moved this task from Needs More Work to Needs QA on the Readers-Web-Kanbanana-Board-Old board.Feb 23 2018, 10:44 PM

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

	F13707055: Screen Shot 2018-02-13 at 12.30.42 PM.png
	Feb 13 2018, 11:31 AM

	F14432617: image.png
	Mar 5 2018, 6:01 PM

	F14432584: image.png
	Mar 5 2018, 6:01 PM

	F14432604: image.png
	Mar 5 2018, 6:01 PM

	F14432597: image.png
	Mar 5 2018, 6:01 PM

Mobile diff warnings do not wrap properlyClosed, ResolvedPublic2 Estimated Story PointsActions