Homing into right sidebar

app.py

@@ -247,14 +247,14 @@ with gr.Blocks(title="Model Test Results Dashboard", css=load_css()) as demo:
     with gr.Row():
         # Sidebar for model selection  
         with gr.Column(scale=1, elem_classes=["sidebar"]):
-            gr.Markdown("# 🤖 TCID")
+            gr.Markdown("# 🤖 TCID", elem_classes=["sidebar-title"])
             
             # Description with integrated last update time
             if Ci_results.last_update_time:
                 description_text = f"**Transformer CI Dashboard**\n\n*Result overview by model and hardware (last updated: {Ci_results.last_update_time})*\n"
             else:
                 description_text = f"**Transformer CI Dashboard**\n\n*Result overview by model and hardware (loading...)*\n"
-            description_display = gr.Markdown(description_text)
+            description_display = gr.Markdown(description_text, elem_classes=["sidebar-description"])
             
             # Summary button at the top
             summary_button = gr.Button(
@@ -264,21 +264,26 @@ with gr.Blocks(title="Model Test Results Dashboard", css=load_css()) as demo:
                 elem_classes=["summary-button"]
             )
             
-            # Back to simple buttons that work
-            # Model selector dropdown - much better for long lists
-            gr.Markdown(f"**Select Model ({len(Ci_results.available_models)}):**")
+            # Model selection header
+            gr.Markdown(f"**Select Model ({len(Ci_results.available_models)}):**", elem_classes=["model-header"])
             
-            model_choices = [model.lower() for model in Ci_results.available_models] if Ci_results.available_models else ["auto", "bert", "clip", "llama"]
-            model_dropdown = gr.Dropdown(
-                choices=model_choices,
-                value=model_choices[0] if model_choices else "auto",
-                label="Choose Model",
-                interactive=True,
-                allow_custom_value=False
-            )
+            # Scrollable container for model buttons
+            with gr.Column(scale=1, elem_classes=["model-container"]):
+                # Create individual buttons for each model
+                model_buttons = []
+                model_choices = [model.lower() for model in Ci_results.available_models] if Ci_results.available_models else ["auto", "bert", "clip", "llama"]
+                
+                for model_name in model_choices:
+                    btn = gr.Button(
+                        model_name,
+                        variant="secondary",
+                        size="sm",
+                        elem_classes=["model-button"]
+                    )
+                    model_buttons.append(btn)
             
             # CI job links at bottom of sidebar
-            ci_links_display = gr.Markdown("🔗 **CI Jobs:** *Loading...*")
+            ci_links_display = gr.Markdown("🔗 **CI Jobs:** *Loading...*", elem_classes=["sidebar-links"])
         
         # Main content area
         with gr.Column(scale=4, elem_classes=["main-content"]):
@@ -322,15 +327,16 @@ with gr.Blocks(title="Model Test Results Dashboard", css=load_css()) as demo:
                             elem_classes=["failed-tests"]
                         )
     
-    # Set up change handler for dropdown
-    model_dropdown.change(
-        fn=lambda selected_model: plot_model_stats(selected_model),
-        inputs=[model_dropdown],
-        outputs=[plot_output, amd_failed_tests_output, nvidia_failed_tests_output]
-    ).then(
-        fn=lambda: [gr.update(visible=False), gr.update(visible=True)],
-        outputs=[summary_display, detail_view]
-    )
+    # Set up click handlers for model buttons
+    for i, btn in enumerate(model_buttons):
+        model_name = model_choices[i]
+        btn.click(
+            fn=lambda selected_model=model_name: plot_model_stats(selected_model),
+            outputs=[plot_output, amd_failed_tests_output, nvidia_failed_tests_output]
+        ).then(
+            fn=lambda: [gr.update(visible=False), gr.update(visible=True)],
+            outputs=[summary_display, detail_view]
+        )
     
     # Summary button click handler
     def show_summary_and_update_links():

styles.css

@@ -36,22 +36,82 @@ div[data-testid="column"]:has(.sidebar) {
     overflow-x: hidden !important;
 }
 
-/* Scrollbar styling for sidebar */
-.sidebar::-webkit-scrollbar {
+/* Individual sidebar elements */
+.sidebar-title {
+    margin-bottom: 10px !important;
+}
+
+.sidebar-description {
+    margin-bottom: 15px !important;
+}
+
+/* Summary button styling - distinct from model buttons */
+.summary-button {
+    background: linear-gradient(135deg, #4a4a4a, #3e3e3e) !important;
+    color: white !important;
+    border: 2px solid #555555 !important;
+    margin: 0 0 15px 0 !important;
+    border-radius: 5px !important;
+    padding: 12px 10px !important;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    position: relative !important;
+    overflow: hidden !important;
+    box-shadow: 
+        0 4px 15px rgba(0, 0, 0, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
+    font-weight: 600 !important;
+    font-size: 14px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.3px !important;
+    font-family: monospace !important;
+    height: 60px !important;
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+    align-items: center !important;
+    line-height: 1.2 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    box-sizing: border-box !important;
+}
+
+.model-header {
+    margin-bottom: 10px !important;
+}
+
+.model-container {
+    height: 300px !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    margin-bottom: 15px !important;
+    scrollbar-width: thin !important;
+    scrollbar-color: #333333 #111111 !important;
+    border: 1px solid #333 !important;
+    border-radius: 5px !important;
+    padding: 5px !important;
+}
+
+.sidebar-links {
+    margin-top: 15px !important;
+}
+
+/* Scrollbar styling for model container */
+.model-container::-webkit-scrollbar {
     width: 8px !important;
     background: #111111 !important;
 }
 
-.sidebar::-webkit-scrollbar-track {
+.model-container::-webkit-scrollbar-track {
     background: #111111 !important;
 }
 
-.sidebar::-webkit-scrollbar-thumb {
+.model-container::-webkit-scrollbar-thumb {
     background-color: #333333 !important;
     border-radius: 4px !important;
 }
 
-.sidebar::-webkit-scrollbar-thumb:hover {
+.model-container::-webkit-scrollbar-thumb:hover {
     background-color: #555555 !important;
 }
 
@@ -92,20 +152,25 @@ div[data-testid="column"]:has(.sidebar) {
     background-color: #555555 !important;
 }
 
-/* Force button containers to single column - DISABLED */
-/*
-.sidebar .gr-button,
-.sidebar button {
+/* Target Gradio column containing model-container */
+div[data-testid="column"]:has(.model-container) {
+    flex: 1 1 auto !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    max-height: calc(100vh - 350px) !important;
+}
+
+/* Force button containers to single column in model container */
+.model-container .gr-button,
+.model-container button {
     display: block !important;
     width: 100% !important;
     max-width: 100% !important;
     margin: 2px 0 !important;
     flex: none !important;
 }
-*/
 
-/* Model button styling - DISABLED */
-/*
+/* Model button styling */
 .model-button {
     background: linear-gradient(135deg, #2a2a2a, #1e1e1e) !important;
     color: white !important;
@@ -135,7 +200,6 @@ div[data-testid="column"]:has(.sidebar) {
     transform: translateY(-1px) !important;
     box-shadow: 0 2px 8px rgba(116, 185, 255, 0.2) !important;
 }
-*/
 
 /*
 .model-button:active {