Page MenuHomePhabricator

Regression: mobile watchlist's text overlaps
Closed, ResolvedPublicBUG REPORT

Description

Since 1.43.0-wmf.26, on the mobile watchlist there is noticeable overlap between page names and usernames. The issue has been reported on itwiki. The screenshot below is from testwiki using safemode=1. Caused by T375975

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

  • Login and disable advanced mode (the default experience)
  • Visit Watchlist
  • usernames are on wrong line

What happens?:
Items flushed together

Screenshot 2024-10-09 at 5.48.20 PM.png (688×2 px, 138 KB)

What should have happened instead?:
Items stacked on different lines

Screenshot 2024-10-09 at 5.47.34 PM.png (510×2 px, 74 KB)

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

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

It does not happen using advanced mode.

Screenshot From 2024-10-09 16-55-13.png (913×547 px, 116 KB)

Requirement

Ensure that on the mobile watchlist, usernames are displayed on separate lines and do not overlap with page names. The issue of text overlap must be resolved, and usernames should be properly stacked in non-advanced mode.

BDD

Feature: Prevent text overlap on mobile watchlist

  Scenario: Display usernames correctly in mobile watchlist
    Given the user has disabled advanced mode
    When the user visits their watchlist
    Then usernames should be displayed on separate lines, not overlapping with page names

Test Steps

Test Case 1: Verify Correct Display of Usernames in Mobile Watchlist

  1. Log in to the test environment and disable advanced mode.
  2. Visit the Watchlist page.
  3. AC1: Confirm that usernames are displayed on separate lines without overlapping with page names.

QA Results - Beta

ACStatusDetails
1T376814#10232175

QA Results - Prod

ACStatusDetails
1T376814#10257284

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Titore renamed this task from Regression: mobile watchlist text overlaps to Regression: mobile watchlist's text overlaps.Oct 9 2024, 3:20 PM

Confirmed on wmf.26 - Special:Watchlist on mobile with Advanced mode off displays long title overlapping with a user name row.
NOTES:

  • The issue seems specific to Special:Watchlist - RecentChanges, Contributions, Notifications do not display the issue.

Screen Shot 2024-10-09 at 5.12.14 PM.png (1×848 px, 155 KB)

  • wmf.25 doesn't display the issue:

Screen Shot 2024-10-09 at 5.22.32 PM.png (1×870 px, 223 KB)

It looks like the mw-title element is now wrapped in a bdi tag - which was introduced by T375975. Since that task is low priority if we want to treat this a deploy blocker, we should roll back that change for now, and adapt mobile first.

ovasileva subscribed.

Marking as high priority as it's a significant visual regression for all logged-in users on mobile. I think rolling back the lower priority change makes sense.

Change #1079146 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/core@master] Bring ChangesList user link out of <bdi>

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

https://gerrit.wikimedia.org/r/1079146 should fix this as locally it turns

image.png (262×740 px, 41 KB)

into

image.png (264×486 px, 35 KB)

Hopefully that be enough if not guess we should go for revert

@ovasileva: Would you know who could review this patch rather soon, as it's the train deployment window right now?

(How am I supposed to contact this team in real time? Cannot spot it on https://office.wikimedia.org/wiki/Team_interfaces , I don't see contact info on https://www.mediawiki.org/wiki/Reading/Web , and https://phabricator.wikimedia.org/project/profile/67/ says #wikimedia-mobile on IRC which is a strange name.)

If this is really supposed to block the entire deployment train, this should be "Unbreak now" priority instead of "High" priority

Change #1079218 had a related patch set uploaded (by Hashar; author: Hashar):

[mediawiki/core@wmf/1.43.0-wmf.26] Revert "Use HTML markup instead of bidi control chars in wiki changes"

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

Change #1079218 merged by Aklapper:

[mediawiki/core@wmf/1.43.0-wmf.26] Revert "Use HTML markup instead of bidi control chars in wiki changes"

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

Mentioned in SAL (#wikimedia-operations) [2024-10-10T08:55:39Z] <aklapper@deploy2002> Started scap sync-world: Backport for [[gerrit:1079218|Revert "Use HTML markup instead of bidi control chars in wiki changes" (T375975 T376814)]]

Mentioned in SAL (#wikimedia-operations) [2024-10-10T08:57:52Z] <aklapper@deploy2002> hashar, aklapper: Backport for [[gerrit:1079218|Revert "Use HTML markup instead of bidi control chars in wiki changes" (T375975 T376814)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-10-10T09:07:49Z] <aklapper@deploy2002> Finished scap sync-world: Backport for [[gerrit:1079218|Revert "Use HTML markup instead of bidi control chars in wiki changes" (T375975 T376814)]] (duration: 12m 09s)

Decided to revert the patch in .26 only per the "Hopefully that be enough if not guess we should go for revert" comment above, as this task was marked as a train blocker and its proposed patch had not been reviewed so far. Removing this task as a train blocker.

Can confirm the patch demo looks good!

@ovasileva: Would you know who could review this patch rather soon, as it's the train deployment window right now?

(How am I supposed to contact this team in real time? Cannot spot it on https://office.wikimedia.org/wiki/Team_interfaces , I don't see contact info on https://www.mediawiki.org/wiki/Reading/Web , and https://phabricator.wikimedia.org/project/profile/67/ says #wikimedia-mobile on IRC which is a strange name.)

The quickest way to reach us is the talk-to-web channel on Slack. Thank you for calling this out - we're currently in the process of overhauling some of our team documentation and we'll make a note to make this available and explicit within our documentation.

How it should look:

Screenshot 2024-10-10 at 2.21.58 PM.png (1×2 px, 218 KB)

How it current looks with new patch:

Screenshot 2024-10-10 at 2.22.07 PM.png (1×2 px, 239 KB)

Adding as blocker for next deploy as this has not been fixed on master - only production.

Part of the issue that I'm bringing back a dir mark call there even though it doesn't have to be dir mark, a nbsp, zwj, zwnj could do the trick also, one surprising thing I'm seeing with HTML but I guess it has something to do with whitespace collapsing.

Change #1079146 merged by jenkins-bot:

[mediawiki/core@master] Fix regressions around use of <bdi> in ChangesList

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

Jdlrobson lowered the priority of this task from High to Medium.Tue, Oct 15, 8:22 PM
Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: Beta
OS: macOS
Browser: Chrome
Device: MS
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Verify Correct Display of Usernames in Mobile Watchlist

  1. Log in and disable advanced mode.
  2. Visit the Watchlist page on the mobile site.
  3. ✅ AC1: Confirm that usernames are displayed on separate lines and do not overlap with page names.

screenshot 101.png (661×595 px, 52 KB)

While this looks fixed for the most part, it's still broken for watched categories.

Screenshot From 2024-10-17 15-27-34.png (822×556 px, 100 KB)

I can't see the issue locally so guess I need help for reproducing this

image.png (774×604 px, 60 KB)

I can't see the issue locally so guess I need help for reproducing this

This happens when you enable showing pages being added or removed from categories.

To reproduce:

  • add a category to your watchlist;
  • add a page to said category;
  • open the desktop watchlist;
  • add the filter "Category changes";
  • save the current filter settings and set them as default;
  • open the mobile watchlist.

Change #1081249 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/skins/MinervaNeue@master] Make sure contributor's name is on its line

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

Change #1081251 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/core@master] Remove no longer needed workaround

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

I can't see the issue locally so guess I need help for reproducing this

This happens when you enable showing pages being added or removed from categories.
[..]

I reproduced this locally, it needed $wgRCWatchCategoryMembership = true; on LocalSettings.php and doesn't happen on default installation of MediaWiki, that 'hist' shows this wasn't a supported use case from a long time ago but I've uploaded my fix anyway which includes removal of two ugly workarounds also in addition to fix of it.

I've opened a new ticket since this looks like a different issue:
T377503

Change #1081249 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/skins/MinervaNeue@master] Make sure contributor's name is on its line

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

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS
Browser: Chrome
Device: MS
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Verify Correct Display of Usernames in Mobile Watchlist

  1. Log in and disable advanced mode.
  2. Visit the Watchlist page on the mobile site.
  3. ✅ AC1: Confirm that usernames are displayed on separate lines and do not overlap with page names.

screenshot 118.png (811×1 px, 130 KB)