Noted in T307900#7964376 -- pending merge over there, 1st use case should be covered.

Although I'm unclear if design should change - here icon overlaps content. In other task, it lives in its own narrow column.
@alexhollender_WMF mind confirming?

@Jdlrobson I realized that the second case in the description (i.e. collapsed TOC in the sticky header) isn't possible until T307901 is complete. On viewports greater than 1000px the TOC is sticky on the side by default. Without the hide button completed there will be 2 TOCs on larger screen sizes. The work involved in getting the TOC in the sticky header is pretty distinct from the first case anyway, so I'd recommend splitting that into a separate ticket.

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

[mediawiki/skins/Vector@master] Add support for floating TOC lower down the page

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

erring on moving this back to Ready for Dev because I think the 2nd use case still needs addressing?

actually given @bwang's previous comment maybe part 2 needs a new ticket

Opened T311103 for the 2nd design use use outlined in this ticket so moving this ticket to QA

Change 804621 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add support for floating TOC lower down the page

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

@bwang @cjming according to a report we're seeing the toggle icon AND the table of contents in the sidebar on certain mobile devices:

Test Result - Beta

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

Test Artifact(s):

QA Steps

• Beta cluster link TK
• ✅ AC1: Verify that above desktop (1000px) view port, sticky TOC behaves as it does currently on production.
  • Verified with sidebar collapsed, expanded, scrolling toc, non-scrolling toc, section "highlighting", clicking items, and expanding/collapsing sections, and visual similarity to Prod.
• Between tablet (720px) and desktop (1000px) view ports:
  • ✅ AC2: Verify that clicking on a TOC section navigates the user to that section with the collapsed TOC icon sticky in the sidebar (for both sidebar menu expanded/collapsed states)
    
  • Verify that the collapsible TOC icon is navigable via keyboard tabs when lower down on page:
    • ✅ AC3: Tabbing to TOC icon and hitting "Enter" will toggle the TOC open/closed
      
  • Below tablet (720px) view port:
    • ✅ AC4: Verify above steps but note that sidebar menu collapses full width above main content so there is no expanded sidebar container state for the expanded/collapsed TOC.
      
  • ✅ AC5: For the no-js context - note that:
    • the TOC headings will not be collapsed.
    • there is no TOC lower down on the page.

✅	✅	✅

• ✅ AC6: Cross-check in other supported browsers. -Validated safari and firefox

In T308689#8023181, @Jdlrobson wrote:

@bwang @cjming according to a report we're seeing the toggle icon AND the table of contents in the sidebar on certain mobile devices:
Could this relate to the max-width/min-width discussion you were having last week?

thanks @Jdlrobson I can't recall where we discussed this but I think this is the case and we have a ticket to address T310536