Even better sidebar

app.py

@@ -265,7 +265,7 @@ with gr.Blocks(title="Model Test Results Dashboard", css=load_css()) as demo:
             )
             
             # Model selection header
-            gr.Markdown(f"**Select Model ({len(Ci_results.available_models)}):**", elem_classes=["model-header"])
+            gr.Markdown(f"**Select model ({len(Ci_results.available_models)}):**", elem_classes=["model-header"])
             
             # Scrollable container for model buttons
             with gr.Column(scale=1, elem_classes=["model-container"]):

styles.css

@@ -85,10 +85,10 @@ div[data-testid="column"]:has(.sidebar) {
     overflow-y: auto !important;
     overflow-x: hidden !important;
     margin-bottom: 15px !important;
-    scrollbar-width: thin !important;
-    scrollbar-color: #333333 #111111 !important;
+    scrollbar-width: none !important;
+    -ms-overflow-style: none !important;
     border: 1px solid #333 !important;
-    border-radius: 5px !important;
+    border-radius: 8px !important;
     padding: 5px !important;
 }
 
@@ -96,23 +96,9 @@ div[data-testid="column"]:has(.sidebar) {
     margin-top: 15px !important;
 }
 
-/* Scrollbar styling for model container */
+/* Hide scrollbar for model container */
 .model-container::-webkit-scrollbar {
-    width: 8px !important;
-    background: #111111 !important;
-}
-
-.model-container::-webkit-scrollbar-track {
-    background: #111111 !important;
-}
-
-.model-container::-webkit-scrollbar-thumb {
-    background-color: #333333 !important;
-    border-radius: 4px !important;
-}
-
-.model-container::-webkit-scrollbar-thumb:hover {
-    background-color: #555555 !important;
+    display: none !important;
 }
 
 /* Ensure all sidebar content fits within width */
@@ -174,9 +160,7 @@ div[data-testid="column"]:has(.model-container) {
 .model-button {
     background: linear-gradient(135deg, #2a2a2a, #1e1e1e) !important;
     color: white !important;
-    border: 1px solid #555 !important;
     margin: 3px 0 !important;
-    border-radius: 6px !important;
     padding: 8px 12px !important;
     font-weight: 600 !important;
     font-size: 14px !important;
@@ -185,7 +169,6 @@ div[data-testid="column"]:has(.model-container) {
     font-family: monospace !important;
     width: 100% !important;
     max-width: 100% !important;
-    box-sizing: border-box !important;
     white-space: nowrap !important;
     text-overflow: ellipsis !important;
     display: block !important;
@@ -650,4 +633,4 @@ h1, h2, h3, p, .markdown {
 @keyframes resetScroll {
     0% { scroll-behavior: auto; }
     100% { scroll-behavior: auto; }
-} 
+}