feat(table-of-contents): implement scrollable TOC with radix-ui

- Add @radix-ui/react-scroll-area dependency
- Create scroll-area component with custom styling
- Refactor TOC layout to use scroll-area component
- Improve TOC styling and active state transitions
- Apply consistent TOC styling across blog and about layouts

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@astrojs/react": "^4.2.1",
+    "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-slot": "^1.1.2",
     "@tailwindcss/vite": "^4.0.14",
     "@types/react": "^19.0.12",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@astrojs/react':
         specifier: ^4.2.1
         version: 4.3.0(@types/node@24.0.1)(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(jiti@2.4.2)(lightningcss@1.30.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-scroll-area':
+        specifier: ^1.2.9
+        version: 1.2.9(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-slot':
         specifier: ^1.1.2
         version: 1.2.3(@types/react@19.1.8)(react@19.1.0)
@@ -485,6 +488,12 @@ packages:
     peerDependencies:
       '@proload/core': ^0.3.2
 
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
+  '@radix-ui/primitive@1.1.2':
+    resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
+
   '@radix-ui/react-compose-refs@1.1.2':
     resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
     peerDependencies:
@@ -494,6 +503,63 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.4':
+    resolution: {integrity: sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-scroll-area@1.2.9':
+    resolution: {integrity: sha512-YSjEfBXnhUELsO2VzjdtYYD4CfQjvao+lhhrX5XsHD7/cyUNzljF1FHEbgTPN7LH2MClfwRMIsYlqTYpKTTe2A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.2.3':
     resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
     peerDependencies:
@@ -503,6 +569,24 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@rolldown/pluginutils@1.0.0-beta.11':
     resolution: {integrity: sha512-L/gAA/hyCSuzTF1ftlzUSI/IKr2POHsv1Dd78GfqkR83KMNuswWD61JxGV2L7nRwBBBSDr6R1gCkdTmoN7W4ag==}
 
@@ -2561,12 +2645,64 @@ snapshots:
       '@proload/core': 0.3.3
       tsm: 2.3.0
 
+  '@radix-ui/number@1.1.1': {}
+
+  '@radix-ui/primitive@1.1.2': {}
+
   '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.8)(react@19.1.0)':
     dependencies:
       react: 19.1.0
     optionalDependencies:
       '@types/react': 19.1.8
 
+  '@radix-ui/react-context@1.1.2(@types/react@19.1.8)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.8
+
+  '@radix-ui/react-direction@1.1.1(@types/react@19.1.8)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.8
+
+  '@radix-ui/react-presence@1.1.4(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.8)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.8)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
+  '@radix-ui/react-scroll-area@1.2.9(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.8)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.8)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
   '@radix-ui/react-slot@1.2.3(@types/react@19.1.8)(react@19.1.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0)
@@ -2574,6 +2710,18 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.8
 
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.8)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.8
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.8)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.8
+
   '@rolldown/pluginutils@1.0.0-beta.11': {}
 
   '@rollup/pluginutils@5.1.4(rollup@4.43.0)':

src/components/layout/TableOfContents.astro

@@ -1,5 +1,6 @@
 ---
 import { type Lang } from '@/types';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 interface Props {
   lang: Lang;
@@ -10,18 +11,20 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents';
 ---
 
 <div>
-  <div id="nav-content" class="sticky xl:w-72 w-full top-14 max-h-[calc(100svh-3.5rem)] overflow-x-hidden">
+  <div id="nav-content" class="sticky xl:w-72 w-full top-14">
     <div class="flex flex-col gap-3 p-4">
-      <h3 class="dark:text-zinc-400 text-blacktext/90 font-bold tracking-wide text-sm sm:text-base uppercase flex items-center mb-4">
+      <h3 class="dark:text-zinc-200 text-blacktext font-bold tracking-wide text-sm sm:text-base uppercase flex items-center">
         <svg class="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
         </svg>
         {title}
       </h3>
-      <div class="text-neutral-500 dark:text-neutral-300">
+      <ScrollArea className="w-full" client:load>
-        <ul id="toc-list" class="leading-relaxed text-sm sm:text-base border-l dark:border-neutral-500/20 border-blacktext/20">
+        <div class="text-neutral-500 dark:text-neutral-300 pr-4">
-        </ul>
+          <ul id="toc-list" class="leading-relaxed text-sm sm:text-base border-l dark:border-neutral-500/20 border-blacktext/20 mt-4">
-      </div>
+          </ul>
+        </div>
+      </ScrollArea>
     </div>
   </div>
 </div>
@@ -58,20 +61,20 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents';
       // Apply styling based on heading level
       const level = parseInt(header.tagName.charAt(1));
       link.classList.add(
-        "block", "w-full", "text-left", "py-2", "px-3", "rounded-lg", "text-sm", 
+        "block", "w-full", "text-left", "py-1.5", "px-3", "text-sm", 
-        "transition-all", "duration-200", "border-l", "border-transparent", 
+        "transition-all", "duration-200", "border-l-2", "border-transparent", 
-        "text-muted-foreground", "hover:text-foreground", "hover:bg-muted/50"
+        "text-muted-foreground", "hover:text-foreground", "hover:bg-muted/30"
       );
 
       // Add indentation based on heading level
       if (level === 1) {
         link.classList.add("font-semibold");
       } else if (level === 2) {
-        link.classList.add("ml-3");
+        link.classList.add("ml-2");
       } else if (level === 3) {
-        link.classList.add("ml-6");
+        link.classList.add("ml-4");
       } else if (level === 4) {
-        link.classList.add("ml-9");
+        link.classList.add("ml-6");
       }
 
       li.appendChild(link);
@@ -91,6 +94,7 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents';
 
     /**
      * Set up intersection observer for active section tracking
+     * Only highlights the active section without auto-scrolling
      */
     const observer = new IntersectionObserver(
       (entries) => {
@@ -102,16 +106,16 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents';
             // Remove active state from all links
             document.querySelectorAll("#toc-list a").forEach((el) => {
               el.classList.remove(
-                "bg-purple-500/10", "text-purple-500", "border-l-2", "border-purple-500"
+                "bg-purple-500/10", "text-purple-500", "border-l-purple-500", "font-medium"
               );
-              el.classList.add("text-muted-foreground");
+              el.classList.add("text-muted-foreground", "border-transparent");
             });
 
             // Add active state to current link
             if (link) {
-              link.classList.remove("text-muted-foreground");
+              link.classList.remove("text-muted-foreground", "border-transparent");
               link.classList.add(
-                "bg-purple-500/10", "text-purple-500", "border-l-2", "border-purple-500"
+                "bg-purple-500/10", "text-purple-500", "border-l-purple-500", "font-medium"
               );
             }
           }
@@ -132,10 +136,17 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents';
   /* Additional styling for smooth transitions */
   #toc-list a:hover {
     transform: translateX(2px);
+    background-color: rgba(168, 85, 247, 0.05);
   }
   
   #toc-list a:focus {
-    outline: 2px solid rgba(168, 85, 247, 0.5);
+    outline: 2px solid rgba(168, 85, 247, 0.3);
-    outline-offset: 2px;
+    outline-offset: 1px;
+  }
+
+  /* Smooth transition for active state */
+  #toc-list a {
+    position: relative;
+    transition: all 0.2s ease;
   }
 </style>

src/components/ui/scroll-area.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

src/layouts/AboutLayout.astro

@@ -76,20 +76,18 @@ const lang = Astro.currentLocale as Lang || defaultLang;
             <aside class="xl:col-span-1 order-1 xl:order-2">
               <div class="xl:sticky xl:top-24 space-y-6 sm:space-y-8 xl:space-y-12 xl:max-h-[calc(100vh-6rem)] xl:overflow-y-auto">
                 <!-- Table of Contents -->
-                <div class="bg-card/50 backdrop-blur-sm rounded-2xl border border-border h-auto xl:h-[400px] lg:h-[500px] overflow-y-auto">
+                <div class="max-xl:hidden">
-                  <div class="max-xl:hidden">
+                  <div id="nav-content" class="sticky xl:w-72 w-full top-14">
-                    <div id="nav-content" class="sticky w-72 top-14 max-h-[calc(100svh-3.5rem)] overflow-x-hidden">
+                    <div class="flex flex-col gap-3 p-4">
-                      <div class="flex flex-col gap-3 p-4">
+                      <h3 class="dark:text-zinc-200 text-blacktext font-bold tracking-wide text-sm sm:text-base uppercase flex items-center">
-                        <h3 class="dark:text-zinc-400 text-blacktext/90 font-bold tracking-wide text-sm sm:text-base uppercase flex items-center mb-4">
+                        <svg class="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <svg class="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
+                        </svg>
-                          </svg>
+                        {lang === 'zh' ? '目录' : 'Table of Contents'}
-                          {lang === 'zh' ? '📑 目录' : '📑 Table of Contents'}
+                      </h3>
-                        </h3>
+                      <div class="text-neutral-500 dark:text-neutral-300 pr-4">
-                        <div class="text-neutral-500 dark:text-neutral-300">
+                        <ul id="toc-list" class="leading-relaxed text-sm sm:text-base border-l dark:border-neutral-500/20 border-blacktext/20 mt-4">
-                          <ul id="toc-list" class="leading-relaxed text-sm sm:text-base border-l dark:border-neutral-500/20 border-blacktext/20">
+                        </ul>
-                          </ul>
-                        </div>
                       </div>
                     </div>
                   </div>
@@ -138,20 +136,20 @@ const lang = Astro.currentLocale as Lang || defaultLang;
       // Apply styling based on heading level
       const level = parseInt(header.tagName.charAt(1));
       link.classList.add(
-        "block", "w-full", "text-left", "py-2", "px-3", "rounded-lg", "text-sm", 
+        "block", "w-full", "text-left", "py-1.5", "px-3", "text-sm", 
-        "transition-all", "duration-200", "border-l", "border-transparent", 
+        "transition-all", "duration-200", "border-l-2", "border-transparent", 
-        "text-muted-foreground", "hover:text-foreground", "hover:bg-muted/50"
+        "text-muted-foreground", "hover:text-foreground", "hover:bg-muted/30"
       );
 
       // Add indentation based on heading level
       if (level === 1) {
         link.classList.add("font-semibold");
       } else if (level === 2) {
-        link.classList.add("ml-3");
+        link.classList.add("ml-2");
       } else if (level === 3) {
-        link.classList.add("ml-6");
+        link.classList.add("ml-4");
       } else if (level === 4) {
-        link.classList.add("ml-9");
+        link.classList.add("ml-6");
       }
 
       li.appendChild(link);
@@ -182,16 +180,16 @@ const lang = Astro.currentLocale as Lang || defaultLang;
             // Remove active state from all links
             document.querySelectorAll("#toc-list a").forEach((el) => {
               el.classList.remove(
-                "bg-purple-500/10", "text-purple-500", "border-l-2", "border-purple-500"
+                "bg-purple-500/10", "text-purple-500", "border-l-purple-500", "font-medium"
               );
-              el.classList.add("text-muted-foreground");
+              el.classList.add("text-muted-foreground", "border-transparent");
             });
 
             // Add active state to current link
             if (link) {
-              link.classList.remove("text-muted-foreground");
+              link.classList.remove("text-muted-foreground", "border-transparent");
               link.classList.add(
-                "bg-purple-500/10", "text-purple-500", "border-l-2", "border-purple-500"
+                "bg-purple-500/10", "text-purple-500", "border-l-purple-500", "font-medium"
               );
             }
           }
@@ -236,11 +234,16 @@ const lang = Astro.currentLocale as Lang || defaultLang;
   /* Additional styling for smooth transitions */
   #toc-list a:hover {
     transform: translateX(2px);
+    background-color: rgba(168, 85, 247, 0.05);
   }
   
   #toc-list a:focus {
-    outline: 2px solid rgba(168, 85, 247, 0.5);
+    outline: 2px solid rgba(168, 85, 247, 0.3);
-    outline-offset: 2px;
+    outline-offset: 1px;
+  }
+  
+  #toc-list a {
+    transition: all 0.2s ease;
   }
   
   html,

src/layouts/BlogPostLayout.astro

@@ -111,10 +111,8 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
             <!-- Sidebar with Table of Contents -->
             <aside class="xl:col-span-1 order-1 xl:order-2 md:mb-0 mb-6">
               <div class="xl:sticky xl:top-24">
-                <!-- Table of Contents with dynamic max height -->
+                <!-- Table of Contents without height restriction -->
-                <div class="bg-card/50 backdrop-blur-sm rounded-2xl border border-border overflow-y-auto" style="max-height: min(calc(100vh - 6rem), 600px);">
+                <TableOfContents lang={lang} />
-                  <TableOfContents lang={lang} />
-                </div>
               </div>
             </aside>
           </div>