feat(web): better looking scrollbar in the sidebar

2 files changed, 27 insertions, 1 deletions

diff --git a/apps/web/components/dashboard/sidebar/AllLists.tsx b/apps/web/components/dashboard/sidebar/AllLists.tsx
index 306bf4b4..7d67115c 100644
--- a/apps/web/components/dashboard/sidebar/AllLists.tsx
+++ b/apps/web/components/dashboard/sidebar/AllLists.tsx
@@ -71,7 +71,7 @@ export default function AllLists({
   }, [isViewingSharedList, sharedListsOpen]);
 
   return (
-    <ul className="max-h-full gap-y-2 overflow-auto text-sm">
+    <ul className="sidebar-scrollbar max-h-full gap-y-2 overflow-auto text-sm">
       <li className="flex justify-between pb-3">
         <p className="text-xs uppercase tracking-wider text-muted-foreground">
           Lists
diff --git a/tooling/tailwind/globals.css b/tooling/tailwind/globals.css
index 1ba64bcf..45589abf 100644
--- a/tooling/tailwind/globals.css
+++ b/tooling/tailwind/globals.css
@@ -74,3 +74,29 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer components {
+  /* Sleek scrollbar for sidebar only */
+  .sidebar-scrollbar::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .sidebar-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .sidebar-scrollbar::-webkit-scrollbar-thumb {
+    background: hsl(var(--muted-foreground) / 0.15);
+    border-radius: 3px;
+  }
+
+  .sidebar-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--muted-foreground) / 0.25);
+  }
+
+  /* Firefox scrollbar for sidebar */
+  .sidebar-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--muted-foreground) / 0.15) transparent;
+  }
+}