fix(docs): switch .toc-aside from position:fixed to sticky in flex .main row#3527
Conversation
…ain row Prevents the right-sidebar ToC from overlapping the site footer; hidden by default and shown only at the ≥1280px breakpoint. Assisted-By: claude-opus-4-5
docker-agent
left a comment
docker-agent
left a comment
There was a problem hiding this comment.
Assessment: 🟢 APPROVE
The CSS change correctly replaces position:fixed with position:sticky on .toc-aside and introduces a flex row layout on .main at the ≥1280px breakpoint. No real bugs were found in the introduced changes.
Analysis summary: Two potential concerns around position:sticky were investigated and dismissed: (1) the ancestor chain (html → body → .main → .toc-aside) has no overflow:hidden/auto/scroll that would break sticky; (2) the flex setup is textbook-correct — align-items:flex-start on .main plus align-self:flex-start on .toc-aside ensure the item doesn't stretch to full height, and top:var(--header-height) is present. The breakpoint semantics (TOC shown at ≥1280px) are preserved correctly with the default display:none + @media(min-width:1280px) { display:block } pattern.
aheritier
added
area/docs
4 participants
The right-sidebar table of contents (
.toc-aside) was usingposition:fixedand a full viewport height, which caused it to overlap the site footer when a reader scrolled to the bottom of a long page. Since fixed positioning takes the element out of flow, there was no natural boundary to stop it from sitting on top of the footer.The fix replaces
position:fixedwithposition:stickyon.toc-aside, pins it just below the header withtop, and gives it a boundedmax-heightplusoverflow-y:autoso it scrolls independently when the page content is taller than the viewport. To make content and TOC proper flow siblings,.mainis set todisplay:flexwithflex-direction:rowat the ≥1280px breakpoint. The now-redundantmax-width:1280pxvisibility-hide rule for the TOC is removed since visibility is still controlled by the default hidden state and the breakpoint show rule.No template or JS changes are needed. Verified with a Hugo build via the docs Dockerfile;
task lintandtask testare clean.