From d2a477da0cc3781832c96018c240390bc718fcab Mon Sep 17 00:00:00 2001
From: Dries Peeters <dries.peeters96@gmail.com>
Date: Mon, 17 Nov 2025 19:24:49 +0100
Subject: [PATCH] Improve sidebar scrollbar styling for better UI consistency

- Add custom scrollbar styling for sidebar navigation menu
- Implement thin, subtle scrollbar with transparent track
- Support both light and dark themes with appropriate opacity
- Add hover effects for better user interaction
- Compatible with Firefox (scrollbar-width/color) and Webkit browsers
- Fixes default browser scrollbar appearance when sidebar content overflows
---
 app/templates/base.html | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/app/templates/base.html b/app/templates/base.html
index 6033014..d0f3bba 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -89,6 +89,37 @@
         /* Ensure body and html don't cause horizontal overflow */
         html, body { overflow-x: hidden; }
         #appShell { overflow-x: hidden; width: 100%; }
+        
+        /* Custom scrollbar styling for sidebar */
+        #sidebar {
+            scrollbar-width: thin;
+            scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+        }
+        .dark #sidebar {
+            scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
+        }
+        /* Webkit scrollbar styling (Chrome, Edge, Safari) */
+        #sidebar::-webkit-scrollbar {
+            width: 8px;
+        }
+        #sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        #sidebar::-webkit-scrollbar-thumb {
+            background-color: rgba(156, 163, 175, 0.5);
+            border-radius: 4px;
+            border: 2px solid transparent;
+            background-clip: padding-box;
+        }
+        #sidebar::-webkit-scrollbar-thumb:hover {
+            background-color: rgba(156, 163, 175, 0.7);
+        }
+        .dark #sidebar::-webkit-scrollbar-thumb {
+            background-color: rgba(156, 163, 175, 0.3);
+        }
+        .dark #sidebar::-webkit-scrollbar-thumb:hover {
+            background-color: rgba(156, 163, 175, 0.5);
+        }
     </style>
     <script>
         // Theme init (unchanged)