Update TOC to use normal scrollcontainer

zenoachtig · zenoachtig · commit dcd03554bd5d · 2025-12-11T14:28:26.000+01:00
diff --git a/packages/gitbook/src/components/AIChat/AIChat.tsx b/packages/gitbook/src/components/AIChat/AIChat.tsx
@@ -83,7 +83,7 @@ export function AIChat() {
             data-testid="ai-chat"
             withScrim={true}
             className={tcls(
-                'ai-chat mx-auto not-hydrated:hidden w-96 max-w-full pl-8 transition-[width] duration-300 ease-quint lg:max-xl:w-80'
+                'ai-chat mx-auto ml-8 not-hydrated:hidden w-96 transition-[width] duration-300 ease-quint lg:max-xl:w-80'
             )}
         >
             <EmbeddableFrame className="relative shrink-0 border-tint-subtle border-l to-tint-base">
@@ -226,7 +226,7 @@ export function AIChatBody(props: {
                 contentClassName="p-4 gutter-stable flex flex-col gap-4"
                 orientation="vertical"
                 fadeEdges={['leading']}
-                active={`message-group-${chat.messages.filter((message) => message.role === 'user').length - 1}`}
+                active={`#message-group-${chat.messages.filter((message) => message.role === 'user').length - 1}`}
             >
                 {isEmpty ? (
                     <div className="flex grow flex-col">
diff --git a/packages/gitbook/src/components/SiteSections/SiteSectionList.tsx b/packages/gitbook/src/components/SiteSections/SiteSectionList.tsx
@@ -40,7 +40,7 @@ export function SiteSectionList(props: { sections: ClientSiteSections; className
                     orientation="vertical"
                     style={{ maxHeight: `${MAX_ITEMS * 3 + 2}rem` }}
                     className="pb-4"
-                    active={currentSection.id}
+                    active={`#${currentSection.id}`}
                 >
                     <div className="flex w-full flex-col px-2">
                         {sectionsAndGroups.map((item) => {
diff --git a/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx b/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx
@@ -76,7 +76,7 @@ export function SiteSectionTabs(props: {
                         ? 'md:-mr-8 -mr-4 sm:-mr-6'
                         : 'after:contents[] after:absolute after:inset-y-2 after:right-0 after:border-transparent after:border-r after:transition-colors'
                 )}
-                active={currentSection.id}
+                active={`#${currentSection.id}`}
                 trailingEdgeScrollClassName={children ? 'after:border-tint' : ''}
             >
                 <NavigationMenu.List
diff --git a/packages/gitbook/src/components/TableOfContents/TOCScroller.tsx b/packages/gitbook/src/components/TableOfContents/TOCScroller.tsx
diff --git a/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx b/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx
@@ -3,9 +3,9 @@ import { SiteInsightsTrademarkPlacement } from '@gitbook/api';
 import type React from 'react';
 
 import { tcls } from '@/lib/tailwind';
+import { ScrollContainer } from '../primitives/ScrollContainer';
 import { SideSheet } from '../primitives/SideSheet';
 import { PagesList } from './PagesList';
-import { TOCScrollContainer } from './TOCScroller';
 import { TableOfContentsScript } from './TableOfContentsScript';
 import { Trademark } from './Trademark';
 import { encodeClientTableOfContents } from './encodeClientTableOfContents';
@@ -74,7 +74,7 @@ export async function TableOfContents(props: {
                     'lg:page-no-toc:[html[style*="--outline-top-offset"]_&]:top-(--outline-top-offset)!',
                     'lg:page-no-toc:[html[style*="--outline-height"]_&]:top-(--outline-height)!',
 
-                    'py-6',
+                    'pt-6 pb-4',
                     'lg:sidebar-filled:pr-6',
                     'lg:page-no-toc:pr-0',
                     'max-lg:pl-8',
@@ -106,21 +106,24 @@ export async function TableOfContents(props: {
                     )}
                 >
                     {innerHeader ? innerHeader : null}
-                    <TOCScrollContainer // The scrollview inside the sidebar
-                        className="hide-scrollbar gutter-stable flex grow flex-col overflow-y-auto p-2"
+                    <ScrollContainer
+                        fadeEdges={['trailing']}
+                        orientation="vertical"
+                        contentClassName="flex grow flex-col p-2 gutter-stable"
+                        active="[data-active=true]"
                     >
                         <PagesList
                             pages={pages}
                             isRoot={true}
-                            style="mb-5 page-no-toc:hidden grow border-tint-subtle sidebar-list-line:border-l"
+                            style="page-no-toc:hidden grow border-tint-subtle sidebar-list-line:border-l"
                         />
-                        {customization.trademark.enabled ? (
-                            <Trademark
-                                context={context}
-                                placement={SiteInsightsTrademarkPlacement.Sidebar}
-                            />
-                        ) : null}
-                    </TOCScrollContainer>
+                    </ScrollContainer>
+                    {customization.trademark.enabled ? (
+                        <Trademark
+                            context={context}
+                            placement={SiteInsightsTrademarkPlacement.Sidebar}
+                        />
+                    ) : null}
                 </div>
             </SideSheet>
             <TableOfContentsScript />
diff --git a/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx b/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx
@@ -8,7 +8,6 @@ import { tcls } from '@/lib/tailwind';
 
 import { useCurrentPagePath } from '../hooks';
 import { Link, type LinkInsightsProps, type LinkProps } from '../primitives';
-import { useScrollToActiveTOCItem } from './TOCScroller';
 
 /**
  * Client component for a page document to toggle its children and be marked as active.
@@ -81,8 +80,6 @@ function LinkItem(
     }
 ) {
     const { isActive, href, insights, children, onActiveClick } = props;
-    const anchorRef = useRef<HTMLAnchorElement>(null);
-    useScrollToActiveTOCItem({ anchorRef, isActive });
 
     const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
         if (isActive && onActiveClick) {
@@ -93,7 +90,7 @@ function LinkItem(
 
     return (
         <Link
-            ref={anchorRef}
+            data-active={isActive}
             href={href}
             insights={insights}
             aria-current={isActive ? 'page' : undefined}
diff --git a/packages/gitbook/src/components/TableOfContents/Trademark.tsx b/packages/gitbook/src/components/TableOfContents/Trademark.tsx
@@ -17,33 +17,7 @@ export function Trademark(props: {
 }) {
     const { className, ...rest } = props;
     return (
-        <div
-            className={tcls(
-                'sticky',
-                'z-2',
-
-                'mt-auto',
-                'inset-x-0',
-                '-bottom-2',
-                '-mb-2',
-                'sidebar-filled:pb-2',
-                'page-no-toc:pb-0',
-
-                'pointer-events-none',
-
-                'bg-tint-base',
-                'sidebar-filled:bg-tint-subtle',
-                'theme-muted:bg-tint-subtle',
-                '[html.sidebar-filled.theme-muted_&]:bg-tint-base',
-                '[html.sidebar-filled.theme-bold.tint_&]:bg-tint-base',
-                'lg:page-no-toc:bg-transparent',
-
-                'rounded-lg',
-                'straight-corners:rounded-none',
-                'circular-corners:rounded-2xl',
-                className
-            )}
-        >
+        <div className={tcls('mt-auto pr-4 pb-2 pl-2', className)}>
             <TrademarkLink {...rest} />
         </div>
     );
diff --git a/packages/gitbook/src/components/TableOfContents/index.ts b/packages/gitbook/src/components/TableOfContents/index.ts
@@ -1,4 +1,3 @@
 export { TableOfContents } from './TableOfContents';
 export { PagesList } from './PagesList';
-export { TOCScrollContainer } from './TOCScroller';
 export { Trademark } from './Trademark';
diff --git a/packages/gitbook/src/components/primitives/ScrollContainer.tsx b/packages/gitbook/src/components/primitives/ScrollContainer.tsx
@@ -102,7 +102,9 @@ export function ScrollContainer(props: ScrollContainerProps) {
             return;
         }
         const activeItem =
-            typeof active === 'string' ? document.getElementById(active) : active.current;
+            typeof active === 'string'
+                ? containerRef.current?.querySelector(active)
+                : active.current;
         if (!activeItem || !container.contains(activeItem)) {
             return;
         }
@@ -180,7 +182,7 @@ export function ScrollContainer(props: ScrollContainerProps) {
                     orientation === 'horizontal'
                         ? '-translate-y-1/2! top-1/2 left-0 ml-2'
                         : '-translate-x-1/2! top-0 left-1/2 mt-2',
-                    'absolute not-pointer-none:block hidden scale-0 opacity-0 transition-[scale,opacity]',
+                    'absolute z-10 not-pointer-none:block hidden scale-0 opacity-0 transition-[scale,opacity]',
                     scrollPosition > 0
                         ? 'not-pointer-none:group-hover/scroll-container:scale-100 not-pointer-none:group-hover/scroll-container:opacity-11'
                         : 'pointer-events-none'
@@ -199,7 +201,7 @@ export function ScrollContainer(props: ScrollContainerProps) {
                     orientation === 'horizontal'
                         ? '-translate-y-1/2! top-1/2 right-0 mr-2'
                         : '-translate-x-1/2! bottom-0 left-1/2 mb-2',
-                    'absolute not-pointer-none:block hidden scale-0 transition-[scale,opacity]',
+                    'absolute z-10 not-pointer-none:block hidden scale-0 transition-[scale,opacity]',
                     scrollPosition < scrollSize
                         ? 'not-pointer-none:group-hover/scroll-container:scale-100 not-pointer-none:group-hover/scroll-container:opacity-11'
                         : 'pointer-events-none'
@@ -214,7 +216,7 @@ export function ScrollContainer(props: ScrollContainerProps) {
 /**
  * Scroll to an element in a container.
  */
-function scrollToElementInContainer(element: HTMLElement, container: HTMLElement) {
+function scrollToElementInContainer(element: Element, container: HTMLElement) {
     const containerRect = container.getBoundingClientRect();
     const rect = element.getBoundingClientRect();
 
@@ -229,6 +231,6 @@ function scrollToElementInContainer(element: HTMLElement, container: HTMLElement
             (rect.left - containerRect.left) -
             container.clientWidth / 2 +
             rect.width / 2,
-        behavior: 'smooth',
+        behavior: 'auto',
     });
 }

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ export function SiteSectionList(props: { sections: ClientSiteSections; className`
`40`	`40`	`orientation="vertical"`
`41`	`41`	style={{ maxHeight: `${MAX_ITEMS * 3 + 2}rem` }}
`42`	`42`	`className="pb-4"`
`43`		`- active={currentSection.id}`
	`43`	+ active={`#${currentSection.id}`}
`44`	`44`	`>`
`45`	`45`	`<div className="flex w-full flex-col px-2">`
`46`	`46`	`{sectionsAndGroups.map((item) => {`
Original file line number	Diff line number	Diff line change
`@@ -76,7 +76,7 @@ export function SiteSectionTabs(props: {`
`76`	`76`	`? 'md:-mr-8 -mr-4 sm:-mr-6'`
`77`	`77`	`: 'after:contents[] after:absolute after:inset-y-2 after:right-0 after:border-transparent after:border-r after:transition-colors'`
`78`	`78`	`)}`
`79`		`- active={currentSection.id}`
	`79`	+ active={`#${currentSection.id}`}
`80`	`80`	`trailingEdgeScrollClassName={children ? 'after:border-tint' : ''}`
`81`	`81`	`>`
`82`	`82`	`<NavigationMenu.List`