Page MenuHomePhabricator

visual diff with annotations on narrow screens looks bad
Open, Needs TriagePublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

  • Select a diff with some more complicated changes (easiest to compare revisions over a longer period of time)
  • Use a smaller mobile phone. My screenshot is of a iPhone Pro 14, but its significantly worse on smaller phones

What is noticeable is that the diff isn't really using its available margin space optimally. Note how the inset of the article is higher than the inset of the 'diff' controls. Not also how the inset of the details in the annotation are inset, but this distinction can be done with something like a left border indicator (like we do for quotes), instead of using a margin consuming the limited margin space on mobile.

As a second step, we could consider making the annotation collapsible somehow ?

What happens?:
Not how the diff is hard to read because now it has to display the annotations as well as the article.

What should have happened instead?:
The diff should be readable.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

IMG_7424.PNG (2×1 px, 349 KB)

Annotations with indication for possible winning back some screen real estate

IMG_7BB68BD9C4FE-1.jpeg (2×1 px, 876 KB)

Event Timeline

matmarex moved this task from To Triage to Triaged on the VisualEditor board.
matmarex subscribed.

Should be easy to fix. Or if you have already worked out the details, feel free to write a patch and I'll be happy to review.

Sub task T334181 now deals with margins, but ideally the mobile version would not try to use a two column layout.

Already quite an improvement Ed, thank you !