Description
Currently there is a max-height on the table of contents (.sidebar-toc { max-height: 75vh; }). The purpose of having a max-height is to prevent the table of from extending off the bottom of the screen, (because then it would be impossible to scroll all the way to the bottom of the TOC). The choice of having the max-height be 75vh was to make it easier to scroll all the way to the bottom of the TOC when you are at the top of the page (because there is a ~160px of space between the top of the screen and the top of the TOC initially, so if the max-height was 100vh-the sticky offset of the TOC, you wouldn't be able to reach the bottom of the TOC without scrolling the page first, and getting the TOC into it's sticky position). Here is what we have currently, which allows you to scroll to the bottom of the TOC without scrolling the page:
However, due to the logic we added in T300973, the table of contents is rarely so tall that you would encounter this situation (this happens more on admin pages like wp:ANI). Also, if you scroll the TOC container, and then can't get to the bottom, if you keep trying to scroll without even moving your cursor it will scroll the page. Here is a video of that happening, with the max-height of the TOC set to calc (98vh - 1.5em) (1.5 is the topposition of the TOC when it is sticky):
You can see how the scrolling stops before reaching the bottom of the TOC, and then the secondary scroll scrolls the entire page, allowing you to get to the bottom of the TOC.
To do
Increase the max-height of the TOC to 98vh minus whatever the top offset is (I think it might be different if you are logged-in, with the sticky header, versus logged-out).
QA steps
Perform the following steps when logged-out and logged-in
- Visit https://en.wikipedia.beta.wmflabs.org/wiki/Cat
- Scroll down so that the table of contents is sticky
- Expand every section of the table of contents so that it has a scrollbar
- Verify that the table of contents height spans most of the viewport's height. You should still be able to see all of the contents of the TOC by scrolling it. Ensure the scroll indicator at the bottom is also visible when not scrolled to the bottom of the TOC.
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T319315#8616882 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T319315#8620527 |
