Page MenuHomePhabricator
Create Task
Maniphest T258465

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

Assigned To
ovasileva
Authored By
Edtadros
Jul 21 2020, 5:22 AM
Tags
Referenced Files
F32198100: collapse-small.mov.gif
Aug 28 2020, 2:06 AM
F32187113: Aug-17-2020 19-12-43.gif
Aug 18 2020, 2:13 AM
F31951885: obraz.png
Jul 28 2020, 5:10 PM
F31942771: Modification_de_Test_Page_for_VE_RW_—_Wikipedia_(1)-2.gif
Jul 21 2020, 5:22 AM
Subscribers
Aklapper
Edtadros
Jdlrobson
Masumrezarock100
Mhurd
• nray
Nux
ovasileva

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

Modification_de_Test_Page_for_VE_RW_—_Wikipedia_(1)-2.gif (480×356 px, 3 MB)

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
1✅T258465#6391786

QA Results - Prod

ACStatusDetails
1✅T258465#6418304

Details

SubjectRepoBranchLines +/-
Apply @min-width-supported to .mw-page-containermediawiki/skins/Vectormaster+4 -9
Customize query in gerrit

Related Objects

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
ovasileva edited projects, added Web-Team-Backlog (Kanbanana-FY-2020-21); removed Web-Team-Backlog.
Nux subscribed.Jul 28 2020, 5:10 PM

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

obraz.png (935×1 px, 109 KB)

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 subscribed.

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 moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Jul 31 2020, 8:00 PM
• 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 moved this task from Upcoming to Blocked on Others on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
Jdlrobson subscribed.

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

gerritbot added a comment.Aug 13 2020, 11:16 PM

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

gerritbot added a project: Patch-For-Review.Aug 13 2020, 11:16 PM
Jdlrobson reassigned this task from ovasileva to Edtadros.Aug 17 2020, 10:17 PM
Jdlrobson moved this task from Blocked on Others to QA on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
Jdlrobson added a subscriber: ovasileva.
gerritbot added a comment.Aug 17 2020, 10:31 PM

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

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

ReleaseTaggerBot added a project: MW-1.36-notes (1.36.0-wmf.5; 2020-08-18).Aug 17 2020, 11:00 PM
Maintenance_bot removed a project: Patch-For-Review.Aug 17 2020, 11:10 PM
Edtadros moved this task from QA to QA in Prod on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.Aug 18 2020, 2:13 AM

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

Aug-17-2020 19-12-43.gif (552×640 px, 3 MB)

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

collapse-small.mov.gif (460×640 px, 774 KB)

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 moved this task from QA in Prod to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2020-21) board.
Mhurd subscribed.
ovasileva closed this task as Resolved.Aug 28 2020, 8:58 AM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL