Scrollbar tweaks

static/css/components/layout.css

@@ -24,12 +24,34 @@ body.with-sidebar {
     flex: 1;
     padding: 1rem;
     overflow-y: auto;
-    scrollbar-width: none; /* Firefox */
+    
-    -ms-overflow-style: none; /* IE and Edge */
+    /* Remove the scrollbar hiding styles */
+    /* scrollbar-width: none;
+    -ms-overflow-style: none; */
+
+    /* Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: var(--text-muted) transparent;
+
+    /* Webkit browsers (Chrome, Safari, Edge) */
+    &::-webkit-scrollbar {
+        width: 8px;
     }
 
-#main-content::-webkit-scrollbar {
+    &::-webkit-scrollbar-track {
-    display: none; /* Chrome, Safari and Opera */
+        background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--text-muted);
+        border-radius: 4px;
+        border: 2px solid transparent;
+    }
+
+    /* Optional: Hover state for the thumb */
+    &::-webkit-scrollbar-thumb:hover {
+        background-color: var(--text-color);
+    }
 }
 
 #main-content h1 {