From 5045a05bc1586b29e9beda6df4b64a08012ded9a Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Wed, 17 Jul 2024 09:40:14 +0100
Subject: [PATCH] Update table-of-content.tsx

---
 .../components/docs/table-of-content.tsx      | 52 +++++++++++--------
 1 file changed, 31 insertions(+), 21 deletions(-)

diff --git a/apps/frontpage/components/docs/table-of-content.tsx b/apps/frontpage/components/docs/table-of-content.tsx
index aaffa2ec..fe98d56c 100644
--- a/apps/frontpage/components/docs/table-of-content.tsx
+++ b/apps/frontpage/components/docs/table-of-content.tsx
@@ -6,8 +6,9 @@ import { inView } from 'framer-motion';
 import type { Dispatch, FC, SetStateAction } from 'react';
 import { useEffect, useState } from 'react';
 import { useScrollDirection } from 'react-use-scroll-direction';
-import { ScrollArea } from '../ui/scroll-area';
+import { ScrollBar } from '../ui/scroll-area';
 import { useDocs } from '../../app/docs/provider';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 
 interface Heading {
   id: string;
@@ -41,23 +42,26 @@ export const TableOfContent: FC = () => {
 
   return (
     <nav className="sticky top-[72px] hidden w-[228px] self-start xl:block">
-      <ScrollArea className="h-[calc(100vh-72px)] w-full">
-        <div className="py-12">
-          <div className="block h-8 text-sm font-bold">On this page</div>
-          <ul className="mt-1">
-            {headings?.map((heading) => {
-              return (
-                <Element
-                  heading={heading}
-                  isInView={isInView}
-                  key={heading.id}
-                  setIsInView={setIsInView}
-                />
-              );
-            })}
-          </ul>
-        </div>
-      </ScrollArea>
+      <ScrollAreaPrimitive.Root className="relative h-[calc(100vh-72px)] w-full overflow-hidden">
+        <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+          <div className="py-12 pl-1 pr-4">
+            <div className="block h-8 text-sm font-bold">On this page</div>
+            <ul className="mt-1">
+              {headings?.map((heading) => {
+                return (
+                  <Element
+                    heading={heading}
+                    isInView={isInView}
+                    key={heading.id}
+                    setIsInView={setIsInView}
+                  />
+                );
+              })}
+            </ul>
+          </div>
+        </ScrollAreaPrimitive.Viewport>
+        <ScrollBar className="pb-6 pt-12" />
+      </ScrollAreaPrimitive.Root>
     </nav>
   );
 };
@@ -87,11 +91,17 @@ const Element: FC<ElementProps> = ({ heading, isInView, setIsInView }) => {
   const active = isInView.length > 0 ? isInView[0].includes(heading.id) : false;
 
   return (
-    <li key={heading.id}>
+    <li
+      key={heading.id}
+      className={cn(
+        'mb-2 w-[210px] overflow-hidden text-ellipsis',
+        heading.level === 3 && 'pl-5',
+        heading.level === 4 && 'pl-10',
+      )}
+    >
       <a
         className={cn(
-          'mb-3 flex w-full items-center text-sm text-zinc-700 transition-colors hover:text-blue-500 dark:text-slate-400 dark:hover:text-blue-500',
-          heading.level > 2 && 'ml-5',
+          'text-sm text-zinc-700 transition-colors hover:text-blue-500 dark:text-slate-400 dark:hover:text-blue-500',
           active && 'text-blue-500',
         )}
         href={`#${heading.id}`}