From eb607f7df8c27eb62634ffd4a3a143d5e01c6037 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Fri, 6 Mar 2026 07:39:35 -0600
Subject: [PATCH] feat(ui): auto-hide sidebar scrollbar when not hovering

Replace scrollbar-none with a scrollbar-auto-hide utility that keeps the
scrollbar thumb transparent by default and reveals it on container hover.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ui/src/components/Sidebar.tsx |  2 +-
 ui/src/index.css              | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/Sidebar.tsx b/ui/src/components/Sidebar.tsx
index c1b57f7e..ae5e83d4 100644
--- a/ui/src/components/Sidebar.tsx
+++ b/ui/src/components/Sidebar.tsx
@@ -65,7 +65,7 @@ export function Sidebar() {
         </Button>
       </div>
 
-      <nav className="flex-1 min-h-0 overflow-y-auto scrollbar-none flex flex-col gap-4 px-3 py-2">
+      <nav className="flex-1 min-h-0 overflow-y-auto scrollbar-auto-hide flex flex-col gap-4 px-3 py-2">
         <div className="flex flex-col gap-0.5">
           {/* New Issue button aligned with nav items */}
           <button
diff --git a/ui/src/index.css b/ui/src/index.css
index cacbdb18..1842f4f7 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -178,6 +178,17 @@
   background: oklch(0.5 0 0);
 }
 
+/* Auto-hide scrollbar: transparent by default, visible on container hover */
+.scrollbar-auto-hide::-webkit-scrollbar-thumb {
+  background: transparent !important;
+}
+.scrollbar-auto-hide:hover::-webkit-scrollbar-thumb {
+  background: oklch(0.4 0 0) !important;
+}
+.scrollbar-auto-hide:hover::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.5 0 0) !important;
+}
+
 /* Expandable dialog transition for max-width changes */
 [data-slot="dialog-content"] {
   transition: max-width 200ms cubic-bezier(0.16, 1, 0.3, 1);