Page MenuHomePhabricator

[Bug] Sidebar Expand/Collapse button impacted by Narrow Width
Closed, ResolvedPublicBUG REPORT

Description

Steps to reproduce

  1. While logged in, navigate to a page in the beta cluster (collapsible sidebar should be enabled)
  2. Reduce the width of the browser so that the "Log out" link wraps to the next line

Expected results

  • The expand/collapse button for the sidebar should be clickable at or near the center

Actual results

  • The expand/collapse button clickable area is shifted to the left

Environments observed

  • Browser version: Chrome Version 84.0.4147.89 (Official Build) (64-bit)
  • OS version: macOS Catalina 10.15.5
  • Device model: MBP
  • Device language: English

Check any additional observations

Developer Notes

  • This is caused by the absolutely positioned personal menu blocking the click target of the sidebar button. It is occurs as a result of the padding-left applied to .vector-menu-content-list which is made bigger when the personal menu becomes multiple lines (and blocks the click target even more).
  • The "correct" fix for this is moving the personal menu into the header and getting rid of the absolute positioning on the personal menu (e.g. looks like it is planned as part of T249363).
  • A quick fix might be to remove the padding on vector-menu-content-list. That causes the personal menu to overlap the logo more but is arguably better than the status quo of not being able to click the sidebar button.

QA Results - Beta

ACStatusDetails
1T258465#6391786

QA Results - Prod

ACStatusDetails
1T258465#6418304

Event Timeline

Edtadros created this task.Jul 21 2020, 5:22 AM
Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald TranscriptJul 21 2020, 5:22 AM
ovasileva triaged this task as Medium priority.Jul 21 2020, 12:10 PM
Nux added a subscriber: Nux.Jul 28 2020, 5:10 PM

Just a note -- same happens on pl.wiki on Vector2/Timeless. Firefox 78.

ovasileva raised the priority of this task from Medium to High.Jul 28 2020, 5:15 PM
nray updated the task description. (Show Details)Jul 31 2020, 7:48 PM
nray renamed this task from [Bug] Sidebar Expand/Collapse button impacted by Narrow Width and VE to [Bug] Sidebar Expand/Collapse button impacted by Narrow Width.Jul 31 2020, 7:57 PM
nray updated the task description. (Show Details)
nray added a subscriber: nray.

Updated title/description because I don't think VE is required for this bug to surface - AFAICT it happens on any page where the viewport is small enough to wrap the personal menu

nray updated the task description. (Show Details)Jul 31 2020, 8:03 PM
nray updated the task description. (Show Details)
Jdlrobson changed the task status from Open to Stalled.Aug 4 2020, 12:13 AM
Jdlrobson added a subscriber: Jdlrobson.

This will be fixed by T249363 so let's please focus on that rather than patching the status quo.

Change 620133 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Apply @min-width-supported to .mw-page-container

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

Jdlrobson reassigned this task from ovasileva to Edtadros.Aug 17 2020, 10:17 PM
Jdlrobson added a subscriber: ovasileva.

Change 620133 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Apply @min-width-supported to .mw-page-container

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

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA steps
  1. While logged in, navigate to a page in the beta cluster (collapsible sidebar should be enabled)
  2. Reduce the width of the browser so that the "Log out" link wraps to the next line

✅ AC1: The expand/collapse button for the sidebar should be clickable at or near the center

Edtadros updated the task description. (Show Details)Aug 18 2020, 2:14 AM
Mhurd claimed this task.Aug 27 2020, 9:41 PM

Not yet seeing the collapse button on prod. Poked around preferences to see if there was an option to enable it, but didn't see one 🧐. Guessing hasn't gone live yet... will circle back.

nray added a comment.Aug 27 2020, 9:51 PM

@Mhurd you can try using the useskinversion=2 query param e.g. https://en.wikipedia.org/wiki/Barack_Obama?useskinversion=2 🙂

Mhurd added a comment.Aug 27 2020, 9:52 PM

@nray Oh cool thanks will do!!

Mhurd added a comment.Aug 28 2020, 2:06 AM

Test Result - Prod

Status: ✅ PASS
Environment: prod/enwiki
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: iPhone X
Test Artifact(s):

QA steps
  1. While logged in, navigate to a page in the beta cluster (collapsible sidebar should be enabled)
  2. Reduce the width of the browser so that the "Log out" link wraps to the next line

✅ AC1: The expand/collapse button for the sidebar should be clickable at or near the center

Mhurd updated the task description. (Show Details)Aug 28 2020, 2:06 AM
Mhurd reassigned this task from Mhurd to ovasileva.Aug 28 2020, 3:25 AM
Mhurd added a subscriber: Mhurd.
ovasileva closed this task as Resolved.Aug 28 2020, 8:58 AM