Maniphest T352930

In vector-2022 large TOCs in the hidden menu are unusable when collapsed
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT
Actions

Description

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

Go to a page that has many sections, such that the table of content expands past the body view port (on most resolutions this may be seen here: https://test.wikipedia.org/w/index.php?title=BigDockedTOC&oldid=584288&useskin=vector-2022 OR https://en.wikipedia.beta.wmflabs.org/wiki/T352930?useskin=vector-2022)
Assuming the TOC is on the sidebar, click HIDE next to it
Open the TOC from the menu next to the article title
Attempt to scroll down to see items towards the bottom of the TOC

What happens?:

The page layout rearranges when the TOC is scrolled toward the bottom of the screen, closing the TOC and preventing you from ever getting to the bottom
ADDITIONALLY, even if you reopen the TOC from the now-relocated section, the TOC extends past the viewport on the bottom of the screen, preventing you from ever being able to scroll down to the items lower on the TOC

What should have happened instead?:

Not sure what the "best" fix is, but suggest that dynamic section scrolling happen in the TOC, such as how the sidebar will produce a vertical scroll bar when needed

Software version (skip for WMF-hosted wikis like Wikipedia):
WMF production

Other information (browser name/version, screenshots, etc.):
Originally reported on enwiki by Steue, see https://en.wikipedia.org/w/index.php?title=Wikipedia:Village_pump_(technical)&oldid=1188674279#Hidden_ToC_dis-appeares_on_it's_own_during_scrolling

QA steps

QA this task
QA T352851 and determine whether the fix here addresses that one.

QA Results - Beta

AC	Status	Details
1	✅	T352930#9395326

Details

	Subject	Repo	Branch	Lines +/-
	[Zebra] Fix scrolling behavior in dropdowns	mediawiki/skins/Vector	wmf/1.42.0-wmf.7	+2 -1
	Fix scrolling behavior in dropdowns	mediawiki/skins/Vector	master	+2 -1

Customize query in gerrit

Related Objects

Mentioned In: T356728: Regression: Font size increased on diff pages
T353739: Long collapsed TOCs can have the bottom cut off
T347712: [Zebra] remove feature flag & merge Zebra into default styles
T352851: The table of contents cannot be scrolled when the browser is zoomed in at 150%
T352432: ToC overlaps with footer in Vector 2022 again
Mentioned Here: T352851: The table of contents cannot be scrolled when the browser is zoomed in at 150%

Event Timeline

Xaosflux created this task.Dec 6 2023, 11:43 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 6 2023, 11:43 PM

Xaosflux mentioned this in T352432: ToC overlaps with footer in Vector 2022 again.Dec 6 2023, 11:47 PM

Think this is a dupe, and Zebra Mode 1 does appear to fix it:

https://test.wikipedia.org/w/index.php?title=BigDockedTOC&oldid=584288&useskin=vector-2022&vectorzebradesign=1

sgrabarczuk added projects: Community Feedback (Web), Web-Team-Backlog.Dec 7 2023, 12:29 AM

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q3 Sprint 1); removed Web-Team-Backlog.Dec 7 2023, 12:32 AM

ovasileva triaged this task as High priority.Dec 7 2023, 9:10 AM

ovasileva edited projects, added Web-Team-Backlog (FY2023-24 Q2 Sprint 5); removed Web-Team-Backlog (FY2023-24 Q3 Sprint 1).Dec 7 2023, 1:11 PM

Change 981343 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Fix dropdown ToC not scrollable

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

gerritbot added a project: Patch-For-Review.Dec 7 2023, 2:49 PM

This looks like a duplicate of T352851 to me.

Change 981365 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Fix scrolling behavior in dropdowns

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

Jdlrobson mentioned this in T352851: The table of contents cannot be scrolled when the browser is zoomed in at 150%.Dec 7 2023, 5:26 PM

Jdlrobson mentioned this in T347712: [Zebra] remove feature flag & merge Zebra into default styles.Dec 7 2023, 5:46 PM

ovasileva assigned this task to bwang.Dec 7 2023, 5:54 PM

ovasileva set the point value for this task to 3.

ovasileva moved this task from Incoming to Ready for Development on the Web-Team-Backlog (FY2023-24 Q2 Sprint 5) board.

ovasileva moved this task from Ready for Development to Doing on the Web-Team-Backlog (FY2023-24 Q2 Sprint 5) board.

Jdlrobson updated the task description. (Show Details)Dec 7 2023, 5:56 PM

Xaosflux renamed this task from In vector-2022 large TOCs that in the hidden menu are unusable when collapsed to In vector-2022 large TOCs in the hidden menu are unusable when collapsed.Dec 7 2023, 6:05 PM

bwang moved this task from Doing to Code Review on the Web-Team-Backlog (FY2023-24 Q2 Sprint 5) board.Dec 7 2023, 6:49 PM

Change 981365 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Fix scrolling behavior in dropdowns

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

Change 981365 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix scrolling behavior in dropdowns

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

ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.9; 2023-12-12).Dec 8 2023, 5:00 PM

Jdlrobson reassigned this task from bwang to Edtadros.Dec 8 2023, 7:34 PM

Jdlrobson updated the task description. (Show Details)

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (FY2023-24 Q2 Sprint 5) board.

Jdlrobson added a subscriber: bwang.

Test Result - Beta

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

Test Artifact(s):

QA Steps

Go to a page that has many sections, such that the table of content expands past the body view port (on most resolutions this may be seen here: https://test.wikipedia.org/w/index.php?title=BigDockedTOC&oldid=584288&useskin=vector-2022 OR https://en.wikipedia.beta.wmflabs.org/wiki/T352930?useskin=vector-2022)
Assuming the TOC is on the sidebar, click HIDE next to it
Open the TOC from the menu next to the article title
Attempt to scroll down to see items towards the bottom of the TOC
✅ AC1: TOC should be scrollable

Edtadros updated the task description. (Show Details)Dec 10 2023, 11:39 PM

Change 981740 had a related patch set uploaded (by Jdrewniak; author: Bernard Wang):

[mediawiki/skins/Vector@wmf/1.42.0-wmf.7] [Zebra] Fix scrolling behavior in dropdowns

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

Change 981740 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.42.0-wmf.7] [Zebra] Fix scrolling behavior in dropdowns

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

ReleaseTaggerBot edited projects, added MW-1.42-notes (1.42.0-wmf.7; 2023-11-28); removed MW-1.42-notes (1.42.0-wmf.9; 2023-12-12).Dec 11 2023, 10:00 PM

Sorry Edward. QA step was wrong.

Jdlrobson merged a task: T353098: Table of Contents does not scroll on Vector 2022.Dec 12 2023, 7:23 AM

Jdlrobson added a subscriber: lettherebedarklight.

it appears to scroll now

Jdlrobson assigned this task to Edtadros.Dec 12 2023, 9:26 PM

Jdlrobson moved this task from Needs More Work to QA on the Web-Team-Backlog (FY2023-24 Q2 Sprint 5) board.

for some reason

https://en.wikipedia.org/wiki/HTC_Desire_series becomes scrollable.

https://en.wikipedia.org/wiki/Quality_assurance still cannot be scrolled.

@RoyZuo perhaps a non zebra cached version? Does it work for you if you use this link: https://en.wikipedia.org/wiki/Quality_assurance?useskin=vector-2022&vectorzebradesign=1 ?

Though my loading in that may have reset the cache too

Test Result - Beta

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

Test Artifact(s):

QA Steps

❓ AC2: QA T352851 and determine whether the fix here addresses that one.

@Jdlrobson , I'm not sure this satisfies it. there is an odd behavior that if you scroll, at some point the scroll stops. If you wait a moment and resume scrolling without moving your cursor, so the TOC hasn't lost focus, it will then scroll. You can see the pause in the screen shot above. You can see the replay.io here.