fix(docs): minimal theme-aware scrollbars across docs UI

app/docs/[[...slug]]/page.tsx

@@ -74,7 +74,7 @@ export default async function DocsPage({ params }: DocsPageProps) {
         <MDX components={getMDXComponents()} />
       </article>
       <aside className="fixed top-8 right-6 hidden w-44 xl:block">
-        <div className="flex max-h-[calc(100dvh-4rem)] flex-col gap-2 overflow-y-auto pl-4">
+        <div className="docs-scroll flex max-h-[calc(100dvh-4rem)] flex-col gap-2 overflow-y-auto pl-4">
           <p className="text-xs text-muted-foreground">On this page</p>
           <PageToc />
         </div>

app/globals.css

@@ -155,29 +155,26 @@
   color: var(--foreground);
 }
 
-.docs-sidebar-scroll {
-  scrollbar-gutter: stable;
-  scrollbar-width: thin;
-  scrollbar-color: color-mix(in oklab, var(--sidebar-foreground) 20%, transparent)
-    transparent;
+.docs-scroll {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
-.docs-sidebar-scroll::-webkit-scrollbar {
-  width: 0.375rem;
-}
-
-.docs-sidebar-scroll::-webkit-scrollbar-track {
+.docs-scroll::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
   background: transparent;
 }
 
-.docs-sidebar-scroll::-webkit-scrollbar-thumb {
-  border: 2px solid var(--sidebar);
-  border-radius: 999px;
-  background: color-mix(in oklab, var(--sidebar-foreground) 16%, transparent);
-}
-
-.docs-sidebar-scroll::-webkit-scrollbar-thumb:hover {
-  background: color-mix(in oklab, var(--sidebar-foreground) 28%, transparent);
+.docs-scroll::-webkit-scrollbar-thumb,
+.docs-scroll::-webkit-scrollbar-track,
+.docs-scroll::-webkit-scrollbar-button,
+.docs-scroll::-webkit-scrollbar-corner {
+  display: none;
+  width: 0;
+  height: 0;
+  background: transparent;
 }
 
 .docs-content [data-rehype-pretty-code-figure] {

components/cli-block.tsx

@@ -46,7 +46,7 @@ export function CliBlock({ commands }: { commands: string[] }) {
   return (
     <div className="group mt-4 overflow-hidden border border-border bg-background">
       <div className="flex flex-row items-center justify-between gap-2 px-3 pt-2.5 pb-2">
-        <div className="flex min-w-0 items-center gap-1 overflow-x-auto">
+        <div className="docs-scroll flex min-w-0 items-center gap-1 overflow-x-auto">
           {managers.map((manager) => {
             const { icon: Icon, activeTextClassName } = managerMeta[manager];
 
@@ -69,7 +69,7 @@ export function CliBlock({ commands }: { commands: string[] }) {
         <CopyButton className="shrink-0" code={value} />
       </div>
       <div className="bg-background px-4 pb-4 pt-2 text-[13px] text-foreground">
-        <pre className="overflow-x-auto">
+        <pre className="docs-scroll overflow-x-auto">
           <code className="font-mono">{value}</code>
         </pre>
       </div>

components/docs-shell.tsx

@@ -41,7 +41,7 @@ export function DocsShell({
           </Link>
         }
       />
-      <main className="min-w-0 flex-1 overflow-y-auto">{children}</main>
+      <main className="docs-scroll min-w-0 flex-1 overflow-y-auto">{children}</main>
     </div>
   );
 }

components/docs-sidebar.tsx

@@ -93,7 +93,7 @@ export function DocsSidebar({
     <>
       <aside
         className={cn(
-          "docs-sidebar-scroll fixed inset-y-0 left-0 z-50 w-64 shrink-0 overflow-y-auto bg-sidebar p-4 text-sidebar-foreground transition-transform duration-200 ease-out md:static md:z-auto md:h-full md:w-52 md:translate-x-0 md:border-r md:border-sidebar-border",
+          "docs-scroll fixed inset-y-0 left-0 z-50 w-64 shrink-0 overflow-y-auto bg-sidebar p-4 text-sidebar-foreground transition-transform duration-200 ease-out md:static md:z-auto md:h-full md:w-52 md:translate-x-0 md:border-r md:border-sidebar-border",
           open ? "translate-x-0" : "-translate-x-full md:translate-x-0",
         )}
       >

components/landing/landing-page.tsx

@@ -363,7 +363,7 @@ export function LandingPage() {
         </div>
       </header>
 
-      <main className="flex-1 overflow-y-auto">
+      <main className="docs-scroll flex-1 overflow-y-auto">
         <div className="grid grid-cols-2 border-t border-border md:grid-cols-3 xl:border-l xl:border-t-0">
           {showcase.map((item) => (
             <ButtonCell key={item.name} item={item} />

components/mdx.tsx

@@ -83,7 +83,7 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     ),
     table: ({ className, ...props }: ComponentPropsWithoutRef<"table">) => (
       <div className="mt-4 overflow-hidden border border-border bg-background">
-        <div className="overflow-x-auto bg-background">
+        <div className="docs-scroll overflow-x-auto bg-background">
           <table
             className={cn("w-full border-collapse text-left text-sm", className)}
             {...props}
@@ -134,7 +134,7 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
               </div>
               <figure data-rehype-pretty-code-figure="">
                 <div className="bg-background shadow-none">
-                  <pre className={cn("overflow-x-auto bg-transparent p-0 text-sm", className)} {...props}>
+                  <pre className={cn("docs-scroll overflow-x-auto bg-transparent p-0 text-sm", className)} {...props}>
                     {children}
                   </pre>
                 </div>
@@ -145,7 +145,7 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
       }
 
       return (
-        <pre className={cn("overflow-x-auto bg-transparent p-0 text-sm", className)} {...props}>
+        <pre className={cn("docs-scroll overflow-x-auto bg-transparent p-0 text-sm", className)} {...props}>
           {children}
         </pre>
       );