sidebar styling

webui/static/style.css

@@ -35,29 +35,54 @@ body {
 
 .sidebar {
     width: 240px;
-    
+
     /* Premium glassmorphic foundation */
-    background: linear-gradient(135deg, 
-        rgba(20, 20, 20, 0.95) 0%, 
+    background: linear-gradient(135deg,
+        rgba(20, 20, 20, 0.95) 0%,
         rgba(12, 12, 12, 0.98) 100%);
     backdrop-filter: blur(20px) saturate(1.2);
-    
+
     /* Enhanced borders */
     border-right: 1px solid rgba(255, 255, 255, 0.12);
     border-top: 1px solid rgba(255, 255, 255, 0.18);
     border-top-right-radius: 20px;
     border-bottom-right-radius: 20px;
-    
+
     /* Premium shadow effect */
-    box-shadow: 
+    box-shadow:
         0 20px 60px rgba(0, 0, 0, 0.6),
         0 8px 32px rgba(0, 0, 0, 0.4),
         0 0 40px rgba(29, 185, 84, 0.1),
         inset 0 1px 0 rgba(255, 255, 255, 0.15);
-    
+
     display: flex;
     flex-direction: column;
-    overflow: hidden;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    /* Custom scrollbar styling */
+    scrollbar-width: thin;
+    scrollbar-color: rgba(29, 185, 84, 0.5) rgba(255, 255, 255, 0.05);
+}
+
+/* Sidebar scrollbar webkit styling */
+.sidebar::-webkit-scrollbar {
+    width: 6px;
+}
+
+.sidebar::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 10px;
+}
+
+.sidebar::-webkit-scrollbar-thumb {
+    background: rgba(29, 185, 84, 0.5);
+    border-radius: 10px;
+    transition: background 0.3s ease;
+}
+
+.sidebar::-webkit-scrollbar-thumb:hover {
+    background: rgba(29, 185, 84, 0.7);
 }
 
 /* Sidebar Header */