From d367825849b09020290a7ff61a198f3f8218222c Mon Sep 17 00:00:00 2001
From: Greg Shuflin <greg@everydayimshuflin.com>
Date: Wed, 5 Feb 2025 04:28:08 -0800
Subject: [PATCH] Scrollbar tweaks

---
 static/css/components/layout.css | 32 +++++++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/static/css/components/layout.css b/static/css/components/layout.css
index 4f585fa..c4dd963 100644
--- a/static/css/components/layout.css
+++ b/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; */
 
-#main-content::-webkit-scrollbar {
-    display: none; /* Chrome, Safari and Opera */
+    /* Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: var(--text-muted) transparent;
+
+    /* Webkit browsers (Chrome, Safari, Edge) */
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+        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 {