Page MenuHomePhabricator

Regression: Nearby appears on unsupported browsers and some links are incorrectly aligned in Minerva sidebar
Closed, ResolvedPublic1 Estimated Story PointsBUG REPORT

Description

Regression caused by Codex migration.

Issue 1: alignment

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

  • Make sure you are logged out
  • Visit any page on a Wikimedia mobile site e.g. https://en.m.wikipedia.org
  • Open the sidebar using the hamburger menu in the top left

What happens?:
"Nearby" and "Settings" is not aligned the same as the other items

Screenshot 2023-09-18 at 18.27.04.png (798×658 px, 76 KB)

What should have happened instead?:
All items should be nicely aligned

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

Appears to be caused by the CSS rule

.client-js .jsonly {
    display: inherit;
}

which is overriding display: flex.

Issue 2: visibility

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

  • Disable JS
  • Visit any page on a Wikimedia mobile site e.g. https://en.m.wikipedia.org
  • Open the sidebar using the hamburger menu in the top left

What happens?:
"Nearby" is visible.

What should have happened instead?:
Nearby should not be visible.

QA Results - Beta

ACStatusDetails
1T346670#9422723
2T346670#9422723

QA Results - Beta

ACStatusDetails
1T346670#9448531
2T346670#9448531

Event Timeline

Jdlrobson renamed this task from Some links are incorrectly aligned in Minerva sidebar to Regression: Nearby appears on unsupported browsers and some links are incorrectly aligned in Minerva sidebar.Sep 18 2023, 10:43 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: ovasileva.
ovasileva triaged this task as Medium priority.Sep 21 2023, 5:06 PM

The alignment also seems to be caused by whitespace next to the nearby and settings text. The new styles dont rely on whitespace to handle spacing.

The display: inherit impacts this more, but still seems good to get rid of the whitespace

ovasileva set the point value for this task to 1.Sep 21 2023, 5:08 PM

.jsonly { display: none; } is not applying (overriden, specificity)
.client-js .jsonly { display: inherit; } should be changed to flex.

Jdlrobson lowered the priority of this task from Medium to Low.Sep 25 2023, 5:28 PM
Jdlrobson updated the task description. (Show Details)

Change 983255 had a related patch set uploaded (by Stoyofuku-wmf; author: Stoyofuku-wmf):

[mediawiki/skins/MinervaNeue@master] Fix alignment for nearby and settings items in menu, and correctly hide when JS is disabled

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

Change 983255 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Fix alignment for nearby and settings items in menu, and correctly hide when JS is disabled

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

Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Issue 1: alignment
Make sure you are logged out
Visit any page on a Wikimedia mobile site e.g. https://en.m.wikipedia.org
Open the sidebar using the hamburger menu in the top left
✅ AC1: All items should be nicely aligned

screenshot 382.png (613×782 px, 94 KB)

Issue 2: visibility
Disable JS
Visit any page on a Wikimedia mobile site e.g. https://en.m.wikipedia.org
Open the sidebar using the hamburger menu in the top left
✅ AC2: Nearby should not be visible.

screenshot 383.png (595×989 px, 93 KB)

Jdlrobson claimed this task.

Test Result - Prod

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

Test Artifact(s):

QA Steps

Issue 1: alignment
Make sure you are logged out
Visit any page on a Wikimedia mobile site e.g. https://en.m.wikipedia.org
Open the sidebar using the hamburger menu in the top left
✅ AC1: All items should be nicely aligned

screenshot 392.png (773×758 px, 189 KB)

Issue 2: visibility
Disable JS
Visit any page on a Wikimedia mobile site e.g. https://en.m.wikipedia.org
Open the sidebar using the hamburger menu in the top left
✅ AC2: Nearby should not be visible.

screenshot 393.png (815×622 px, 138 KB)