Docs: improved sidebar size and scrolling when has a large number of items

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>

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"

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}