style(sidenav): add minimal, rounded scrollbar\n\n- Thin 8px WebKit scrollbar with rounded thumb\n- Subtle hover/active contrast; transparent track\n- Firefox: use scrollbar-width: thin; themed colors\n

Author: codyde

src/components/sidebar/style.module.scss

@@ -20,6 +20,32 @@
   height: 100vh;
   overflow-y: auto;
 
+  /* Minimal, accessible scrollbar styling */
+  /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: var(--gray-a6) transparent;
+
+  /* WebKit (Chrome, Edge, Safari) */
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--gray-a6);
+    border-radius: 9999px;
+    border: 2px solid transparent; /* creates inner padding for a lighter feel */
+    background-clip: content-box;
+  }
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: var(--gray-a7);
+  }
+  &::-webkit-scrollbar-thumb:active {
+    background-color: var(--gray-a8);
+  }
+
   @media only screen and (min-width: 768px) {
     position: fixed;
     left: 0;