Page MenuHomePhabricator

Sub-reference edit icon gets misaligned in VisualEditor when using the Minerva skin if the main reference content is too long
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue:

  • Open a page using sub-references on a mobile device (using the Minerva skin) and start editing using VE
  • Select a sub-reference where the main ref content is longer than ~6 lines (might be more/less depending on the screen size)

What happens?:

  • Sub-ref details are not shown and the "edit details" icon gets misaligned. When trying to click on it, the "delete" button gets selected instead

IMG_2748.PNG (750×1,334 px, 191 KB)

  • Scrolling within the context item shows the sub-ref details, but the edit icon doesn't move

IMG_2750.PNG (750×1,334 px, 177 KB)

  • Depending on the main ref length, the "edit details" icon sometimes only gets slightly misaligned...

IMG_2751.PNG (750×1,334 px, 183 KB)

  • ... but sometimes disappears almost entirely

IMG_2752.PNG (750×1,334 px, 188 KB)

What should have happened instead?:

  • Show the edit icon next to the sub-ref details

IMG_2749.PNG (750×1,334 px, 162 KB)

  • Notice that the issue doesn't appear if the screen is large enough or in horizontal view

IMG_2743.PNG (1,334×750 px, 112 KB)

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

Event Timeline

Change #1269999 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Cite@master] Remove fragile sub-ref button re-positioning in Minerva

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

Change #1269999 merged by jenkins-bot:

[mediawiki/extensions/Cite@master] Remove fragile sub-ref button re-positioning in Minerva

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

I quickly reviewed the basic behavior from a UX perspective, and the issue is solved by this fix. Ticket is ready for demo now.

Tobi_WMDE_SW claimed this task.