Background
When the TOC is pinned, and then the viewport is decreased to below tablet, the grid styles stop applying. Ordinarily JS is used to move the TOC into a dropdown in the page title. However, when JS is turned off, we rely on the checkbox hack and some hacky CSS to absolutely position the TOC and make it look like its part of a dropdown in the page title. This behavior broke with the Zebra design
Expected: https://phab.wmfusercontent.org/file/data/vbva42egrgmkwiwhdvrh/PHID-FILE-ykvw22o55aachw4qwykn/Screenshot_2023-06-27_at_2.04.25_PM.png
Actual: https://phab.wmfusercontent.org/file/data/uey3p2izi5jucr7zqmdi/PHID-FILE-syaplupec2n4mo7u4jcg/Screenshot_2023-06-27_at_2.08.25_PM.png
Proposal
After investigating this issue with @Jdrewniak we werent able to find a simple solution, as the TOC styles are already very complicated. Given this case is such an edge case, we dont think its worth continuing to support and maintain the original "fake dropdown" solution.
Instead, we could simply show the TOC above the page content with a max height
 |  |
| Zebra design | Standard design |
This would allow us to remove some very unmaintainable HTML/CSS, and also provide the opportunity to use the same solution for browsers that don't support grid (T313066)
QA
On the Vector 2022 skin, (logged-in or out, doesn't matter) check that, on resolutions less than 1000px:
- The TOC button still collapses into the header
- The TOC button still remains pinned to the edge of screen when scrolling down
And then with JS disabled, at resolutions less than 1000px
- The TOC appears above the content, with a max-height of 200px.
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T340571#9270578 |
| 2 | ✅ ❓ | T340571#9270578 |
| 3 | ✅ | T340571#9270578 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T340571#9297134 |
| 2 | ✅ | T340571#9297134 |
| 3 | ✅ | T340571#9297134 |
