fix: scrollable table of contents

src/components/TableOfContents.astro

@@ -1,4 +1,5 @@
 ---
+import { ScrollArea } from '@/components/ui/scroll-area'
 import { Icon } from 'astro-icon/components'
 import TableOfContentsHeading from './TableOfContentsHeading.astro'
 
@@ -46,26 +47,30 @@ function buildToc(headings: Heading[]): Heading[] {
       class="size-5 transition-transform group-open:rotate-180"
     />
   </summary>
-  <nav>
-    <ul class="pt-3">
-      {toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
-    </ul>
-  </nav>
+  <ScrollArea client:load className="h-64" type="always">
+    <nav>
+      <ul class="pt-3">
+        {toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
+      </ul>
+    </nav>
+  </ScrollArea>
 </details>
 
 <nav
-  class="overflow-wrap-break-word sticky top-16 hidden h-0 w-[calc(50vw-50%-4rem)] translate-x-[calc(-100%-2em)] text-xs leading-4 xl:block"
+  class="sticky top-[5.5rem] hidden h-0 w-[calc(50vw-50%-4rem)] translate-x-[calc(-100%-2em)] text-xs leading-4 xl:block"
 >
-  <div class="mr-6 flex justify-end">
-    <ul
-      class="mr-6 flex max-h-[calc(100vh-8rem)] flex-col justify-end gap-y-2 overflow-y-auto"
-      id="toc-container"
-    >
-      <li>
-        <h2 class="mb-2 text-lg font-semibold">Table of Contents</h2>
-      </li>
-      {toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
-    </ul>
+  <div class="flex justify-end pr-6">
+    <ScrollArea client:load className="max-h-[calc(100vh-8rem)]" type="always">
+      <ul
+        class="flex flex-col justify-end gap-y-2 overflow-y-auto pr-8"
+        id="toc-container"
+      >
+        <li>
+          <h2 class="mb-2 text-lg font-semibold">Table of Contents</h2>
+        </li>
+        {toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
+      </ul>
+    </ScrollArea>
   </div>
 </nav>
 

src/components/TableOfContentsHeading.astro

@@ -6,7 +6,7 @@ const { heading } = Astro.props
 ---
 
 <li
-  class="mr-2 list-inside list-disc px-6 py-1.5 text-sm text-foreground/60 xl:list-none xl:p-0"
+  class="list-inside list-disc px-4 py-1.5 text-sm text-foreground/60 xl:list-none xl:p-0"
 >
   <Link
     href={'#' + heading.slug}
@@ -16,7 +16,7 @@ const { heading } = Astro.props
   </Link>
   {
     heading.subheadings.length > 0 && (
-      <ul class="translate-x-3 xl:ml-4 xl:mt-2 xl:translate-x-0 xl:space-y-2">
+      <ul class="translate-x-3 xl:ml-4 xl:mt-2 xl:flex xl:translate-x-0 xl:flex-col xl:gap-2">
         {heading.subheadings.map((subheading: Heading) => (
           <Astro.self heading={subheading} />
         ))}

src/components/ui/scroll-area.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+
+import { cn } from '@/lib/utils'
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }