From 1faa5772fda54862d1a4a160fe0ebacb402f1783 Mon Sep 17 00:00:00 2001
From: gbuomprisco <giancarlopsk@gmail.com>
Date: Wed, 30 Oct 2024 21:49:48 +0800
Subject: [PATCH] Docs: improved sidebar size and scrolling when has a large
 number of items

---
 .../web/app/(marketing)/docs/_components/docs-navigation.tsx | 2 +-
 .../(marketing)/docs/_components/docs-table-of-contents.tsx  | 2 +-
 apps/web/app/(marketing)/docs/layout.tsx                     | 5 ++++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/web/app/(marketing)/docs/_components/docs-navigation.tsx b/apps/web/app/(marketing)/docs/_components/docs-navigation.tsx
index 1d21e7fb7..e774d1700 100644
--- a/apps/web/app/(marketing)/docs/_components/docs-navigation.tsx
+++ b/apps/web/app/(marketing)/docs/_components/docs-navigation.tsx
@@ -53,7 +53,7 @@ export function DocsNavigation({ pages }: { pages: Cms.ContentItem[] }) {
     <>
       <Sidebar
         variant={'ghost'}
-        className={'sticky'}
+        className={'sticky z-1 max-h-full overflow-y-auto'}
       >
         <Tree pages={pages} level={0} />
       </Sidebar>
diff --git a/apps/web/app/(marketing)/docs/_components/docs-table-of-contents.tsx b/apps/web/app/(marketing)/docs/_components/docs-table-of-contents.tsx
index e06b4d026..166bbf4ba 100644
--- a/apps/web/app/(marketing)/docs/_components/docs-table-of-contents.tsx
+++ b/apps/web/app/(marketing)/docs/_components/docs-table-of-contents.tsx
@@ -13,7 +13,7 @@ export function DocsTableOfContents(props: { data: NavItem[] }) {
   const navData = props.data;
 
   return (
-    <div className="lg:block hidden sticky z-10 bg-background min-w-[14em] border-l p-4 inset-y-0 h-svh">
+    <div className="lg:block hidden sticky bg-background min-w-[14em] border-l p-4 inset-y-0 h-svh max-h-full">
       <ol
         role="list"
         className="relative text-sm text-gray-600 dark:text-gray-400"
diff --git a/apps/web/app/(marketing)/docs/layout.tsx b/apps/web/app/(marketing)/docs/layout.tsx
index fee293755..096384a54 100644
--- a/apps/web/app/(marketing)/docs/layout.tsx
+++ b/apps/web/app/(marketing)/docs/layout.tsx
@@ -13,7 +13,10 @@ async function DocsLayout({ children }: React.PropsWithChildren) {
   const tree = buildDocumentationTree(docs);
 
   return (
-    <SidebarProvider className={'lg:container'}>
+    <SidebarProvider
+      style={{ '--sidebar-width': '20em' } as React.CSSProperties}
+      className={'lg:container'}
+    >
       <DocsNavigation pages={tree} />
 
       {children}