In T316056#8195365, @Jdlrobson wrote:

I'm a little confused about this task. It looks like the width of the table of contents is set to 220px so it's max width is the explicit width being set. What is being asked for here?

This task assumes that 220px limited width has already been removed.

(Context: sometime in the past two weeks we decided that the 220px limited width was a bug...I thought it had already been removed in a task/patch somewhere. If not, and no tasks exists for that, we should modify this task to be about increasing the max-width of the TOC when it's in a menu).

There is no task for removing the 220px limit that I am aware of, so I've folded that into the acceptance criteria. When removed the width would adjust to the contents, with the current max-width set to 100% like so:.

What should the new max width be?

Would it also need a min-width?

In T316056#8196619, @Jdlrobson wrote:

There is no task for removing the 220px limit that I am aware of, so I've folded that into the acceptance criteria. When removed the width would adjust to the contents, with the current max-width set to 100% like so:.

What should the new max width be?

Would it also need a min-width?

ok thanks. I've updated the task description regarding the max-width (95%).

Regarding a min-width, good question. In the screenshot below I've removed the min-width from the TOC menu...the Contents [move to sidebar] element kind of takes care of providing a min-width. Not sure if we should still specify one? Maybe we can wait for the design system's team feedback on T316055: Establish min & max widths for menus. Example page: https://en.wikipedia.org/wiki/User:AHollender_(WMF)/sandbox/Short_section_title_test

When I added max-width: 95% to prod to test this solution, I noticed a horizontal scrollbar and some text being cutoff. Seems to only happen in FF. If others can reprod this I think it would be good for this task to include a fix for that.

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

[mediawiki/skins/Vector@master] Follow-up: Clean up sticky header and collapsed TOC styles

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

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

[mediawiki/skins/Vector@master] Follow-up: Clean up sticky header and collapsed TOC styles

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

Suggest blocking this until next branch cut given the amount of visual changes currently on next week's train and Pixel not being in a stable state.

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

[mediawiki/skins/Vector@master] Update collapsed TOC menu width

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

just chatted with @bwang, two notes:

• decided to go with 85% of the content width so that there is a bit more of the article showing behind the TOC
• @bwang pointed out that we need to define the max-width differently for the cases where the TOC is opened from the sticky header, and when it's opened from the floating button (when you're scrolled down on the page), since the TOC is in a different container and setting it to 85% doesn't have the same affect. Also noted that there is no way to ensure that the TOC in those cases is the same width as it is in the case where you open it from the page title

from sticky header (max-width: 70vw)	from floating button (max-width: 70vw)

also to note: it seems that when opening the TOC from the sticky header, if there is a super long section heading a horizontal scrollbar appears

@alexhollender_WMF Do we want to apply a min width? Depending on the contents of the TOC it's possible to have a very thin menu. Maybe a min-width: 200px?

In T316056#8240119, @bwang wrote:

@alexhollender_WMF Do we want to apply a min width? Depending on the contents of the TOC it's possible to have a very thin menu. Maybe a min-width: 200px?

yes, min-width: 200px sounds good. My initial assumption was the Contents [move to sidebar] element provided a sort of implicit min-width, though in the future [move to sidebar] could become an icon, or in other languages that whole element might be much shorter.

Change 831126 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Update collapsed TOC menu width

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

yes, min-width: 200px sounds good. My initial assumption was the Contents [move to sidebar] element provided a sort of implicit min-width, though in the future [move to sidebar] could become an icon, or in other languages that whole element might be much shorter.

@alexhollender_WMF right, and the other thing to note is that the "move to sidebar" button goes away on narrow viewports as well.

This is now in beta cluster, would you be able to take a look really quick? I still have to merge the part about adding min-width, but thats fairly straightforward and I think I'd mainly want you to take a look at the max-width in the different collapsed TOC cases and on different screensizes.

In T316056#8240335, @bwang wrote:

This is now in beta cluster, would you be able to take a look really quick? I still have to merge the part about adding min-width, but thats fairly straightforward and I think I'd mainly want you to take a look at the max-width in the different collapsed TOC cases and on different screensizes.

looking good so far

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

[mediawiki/skins/Vector@wmf/1.40.0-wmf.1] Update collapsed TOC menu width

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

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

[mediawiki/skins/Vector@master] Follow-up: Apply min-width to collapsed TOC

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

Change 831127 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Follow-up: Clean up sticky header and collapsed TOC styles

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

Change 832533 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Follow-up: Apply min-width to collapsed TOC

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

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: The collapsed TOC menu no longer has a 220px fixed width
✅ AC2: The TOC menu has a max-width equaling 85% of the main content text (51em) when collapsed into the page title.
✅ AC3: The TOC menu has the same behavior when collapsed into other locations (i.e. the sticky header, floating on narrow screens)
✅ AC4: On narrow screens the TOC menu still never covers the text completely (uses 75vw)
✅ AC5: The TOC menu has a min width of 200px
✅ AC6: Ensure that the TOC never has a horizontal scrollbar (test super long section headings, specifically when opening the TOC from the sticky header)