Fix TOC scroll cut off

[rosieyohannan]

Fix TOC scrolling limitation in sidebar

Problem

The table of contents (TOC) in the right sidebar had a scrolling limitation where users couldn't scroll to see the last few sections when the TOC list was long, unless they were near the bottom of the article page.

Root Cause

The max-height calculation for the TOC (--toc-height) didn't correctly account for the actual sticky positioning of the TOC menu. Specifically:

• TOC sticky position: calc(var(--spacing) * 35) = 8.75rem (using Tailwind's spacing system)
• Height calculation: Used --toc-top = 6rem (navbar + toolbar height)
• Missing space: TOC heading height (2.5rem) + margin (1.2rem) = 3.7rem

This resulted in a 2.75rem + 3.7rem = 6.45rem discrepancy, causing the scrollable area to be too large and cutting off the bottom of the TOC.

Solution

1. Updated --toc-top to use the actual sticky positioning value: calc(var(--spacing) * 35) (8.75rem)
2. Updated --toc-height to properly account for all spacing: calc(100vh - var(--toc-top) - 6.2rem)
   • The 6.2rem accounts for additional bottom spacing and the TOC heading dimensions
3. Made TOC CSS consistent by using top: var(--toc-top) instead of the hardcoded value

Technical Details

• Uses Tailwind's --spacing variable (0.25rem) for consistency with the overall design system
• The * 35 multiplier was empirically determined to position the TOC correctly relative to other page elements
• All TOC positioning now uses the same CSS variable for maintainability

Testing

• TOC now scrolls completely to the bottom on pages with long TOC lists. Check the configuration reference page before and after

This shows the actual last section at the end:

comapre with: https://circleci.com/docs/reference/configuration-reference/ (scroll to end)