hanh.tonguyen/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): auto-hide sidebar scrollbar when not hovering

Browse Source 
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>
This commit is contained in:
Dotta
2026-03-06 07:39:35 -06:00
parent eb033a221f
commit eb607f7df8
2 changed files with 12 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/components/Sidebar.tsx
View File

@@ -65,7 +65,7 @@ export function Sidebar() {
</Button> </Button>
</div> </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"> <div className="flex flex-col gap-0.5">
{/* New Issue button aligned with nav items */} {/* New Issue button aligned with nav items */}
<button <button

11
ui/src/index.css
View File

@@ -178,6 +178,17 @@
background: oklch(0.5 0 0); 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 */ /* Expandable dialog transition for max-width changes */
[data-slot="dialog-content"] { [data-slot="dialog-content"] {
transition: max-width 200ms cubic-bezier(0.16, 1, 0.3, 1); transition: max-width 200ms cubic-bezier(0.16, 1, 0.3, 1);