Fix sticky table of contents scrolling

This commit is contained in:
Tomek Gargula
2026-09-18 16:49:28 +02:00
parent 67f4d08f44
commit 2deb2224e3
2 changed files with 5 additions and 5 deletions
@@ -34,9 +34,8 @@ export function PageGroupItem(props: { page: ClientTOCPageGroup; isFirst?: boole
>
<div
className={tcls(
// Pinned below the sidebar's 16px top fade (ScrollContainer's `mask-t-from-*`),
// so a stuck header is never rendered inside the band that fades it out.
'top-4 sticky z-1',
// Keep the group at the same vertical position as the original sidebar layout.
'-top-4 sticky z-1',
'bg-tint-base',
'sidebar-filled:bg-tint-subtle',
'theme-muted:bg-tint-subtle',
@@ -92,7 +91,8 @@ export function PageGroupItem(props: { page: ClientTOCPageGroup; isFirst?: boole
isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
)}
>
<div className="overflow-hidden">
{/* Clip only while closed so open descendant headers can stick to the main scrollport. */}
<div className={tcls('min-h-0', isOpen ? 'overflow-visible' : 'overflow-clip')}>
<PagesList pages={descendants} />
</div>
</div>
@@ -132,7 +132,7 @@ export async function TableOfContents(props: {
<ScrollContainer
data-testid="toc-scroll-container"
orientation="vertical"
// `pt-4` matches the page-group headers' sticky offset, so the first group rests on it.
// Leave room for the first group below the scrollport's top fade.
contentClassName="flex flex-col p-2 pt-4 gutter-stable"
active="[data-active=true]"
leading={{