Page MenuHomePhabricator

[mobile] mw-pulsating-dot element overlaps Edit label
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue

  • On mobile a user with no previous Suggested edits clicks on any of Suggested edit articles (not a Structured task articles)
  • An article page displays a blue dot placed on the Edit tab

What happens?:

  • mw-pulsating-dot element overlaps Edit label
Screen Shot 2025-03-11 at 11.16.55 AM.png (1×884 px, 202 KB)
Screen Shot 2025-03-11 at 11.17.10 AM.png (1×986 px, 234 KB)

On a real device (iPhone 11, iOS 18) - the blue dot makes the Edit labels only partially visible

IMG_6288.PNG (1×828 px, 498 KB)

The screenshot below is provided by @DLynch

IMG_2808.png (2×1 px, 901 KB)

What should have happened instead?:

  • the blue dot should not obscure the labels

Notes:

  • The overlapping position is not affected by the screen width. The overlap exists for screen widths ranging from 360 to 768px (iPad mini)

Software version wmf.19

Other information:

Event Timeline

Testing notes - to check after the fix:

So, the button showing on the text seems to be indeed what was designed by @RHo:

image.png (184×354 px, 3 KB)

See also Adjust the guidance blue dot on Minerva

However, it seems to now be showing in the middle and not at the bottom of the button/link. Aside from its overall horizontal misalignment.

Change #1127047 had a related patch set uploaded (by Michael Große; author: Michael Große):

[mediawiki/extensions/GrowthExperiments@master] fix(NewcomerTask): realign pulsating dot on edit

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

To analogize this to how we show the pulsing-dot inside VisualEditor, we put it a bit lower down than that -- aligned onto the edge of the toolbar, rather than within the button:

CleanShot 2025-03-12 at 10.15.39@2x.png (176×364 px, 7 KB)

We never extended this to mobile VE, though, so I can't say whether we'd have wanted to alter that in a more space-constrained environment.

Michael moved this task from Incoming to Code Review on the Growth-Team (Current Sprint) board.

For now, I've created a change that mostly resembles the original designs from T244435: Newcomer tasks: guidance blue dot. If we want to change that, then I need a decision and new specs for that.

Change #1127047 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] fix(NewcomerTask): realign pulsating dot on edit

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

Checked in wmf.22 - looks as in previously checked beta cluster screenshots above:

Screen Shot 2025-03-27 at 3.21.56 PM.png (1×700 px, 225 KB)

Also checked and no issues found

  • desktop for potential regressions
  • RTL
  • Minerva skin

To analogize this to how we show the pulsing-dot inside VisualEditor, we put it a bit lower down than that -- aligned onto the edge of the toolbar, rather than within the button:

CleanShot 2025-03-12 at 10.15.39@2x.png (176×364 px, 7 KB)

We never extended this to mobile VE, though, so I can't say whether we'd have wanted to alter that in a more space-constrained environment.

For quite some time, the animation ( i.e. "pulsing") was missing and, also, the blue dot looks flat without an area with a gradient blue color:

Screen Shot 2025-03-27 at 4.59.37 PM.png (1×2 px, 332 KB)

Assuming it's an accepted behavior?