Table of Contents Max Height Inconsistency

[dtimsullivan]

Describe the Bug

On a page with a lot of headers, the table of contents goes past the bottom of the viewport. Which wouldn't normally be a problem, thanks to the scroll bar, but the scroll bar isn't displaying all of the headers when scrolling down. It seems to cut them off, expecting you to scroll down the page itself to see more. My guess is that this has to do with how the max-height is being calculated for the ToC, but I'm not sure. However, scrolling down the page switches to the ToC to the sticky version, which has proper height formatting. In the sticky ToC, you can scroll to the top and bottom of the list without an issue.

Steps to reproduce the behavior:

1. Create a page with a large amount of headers. At least enough to cause the ToC to go past the bottom of the viewport.
2. Try to scroll to the bottom of the ToC.
3. See missing items.
4. Scroll down viewport to change to sticky ToC.
5. Scroll to the top and bottom of the ToC without an issue.

Expected Behavior

I would expect that if I had just opened a page, I could scroll the ToC to any position and be able to see all available headers, without having to scroll the page itself.

System

• MediaWiki Version: 1.39
• Citizen Skin Version: 2.3.0

Non-sticky, scrolled to the top:

Non-sticky, scrolled to the bottom:

Sticky, scrolled to the top:

Sticky, scrolled to the bottom:

Thank you!

[alistair3149]

Thanks for reporting the bug!
Yes you are correct it stems from how max height is calculated currently.
Currently the ToC max height is taking an assumption of how tall is sticky header, which can be dynamic because of different screen sizes and overflow. I would look into it

[alistair3149]

Would you mind to check if the current patch fixes it for you?

[dtimsullivan]

I replaced the StickyHeader.less file with the one you updated. However, I'm not seeing any changes in the table of contents behavior. Were there additional steps I needed to take?

[alistair3149]

Oops sorry I missed one rule, should be fixed now.
Please let me know if it works for you!

[dtimsullivan]

Looks like the ToC without the sticky header is still being cut off at the bottom of the view port when resting at the top of the page.

[alistair3149]

Looks like the ToC without the sticky header is still being cut off at the bottom of the view port when resting at the top of the page.

Ah I see what you mean. That is a bit more complicated to fix and I am currently away for holiday, I will look into it when I come back!

[dtimsullivan]

No problem! I appreciate you looking in to it.