Update app.py

app.py

@@ -261,42 +261,99 @@ def auto_refresh_from_dir(
 
 def build_app() -> gr.Blocks:
     row_css = """
+    /* Main container styling */
+    .gradio-container {
+        max-width: 100% !important;
+        padding: 20px !important;
+    }
+    
+    /* Table styling */
     .gradio-container table.metrics-table th,
     .gradio-container table.metrics-table td {
-        padding: 8px 12px;
-        border: 1px solid #e5e7eb;
+        padding: 10px 14px;
+        border: 1px solid #d1d5db;
         white-space: nowrap;
         font-size: 13px;
+        text-align: left;
     }
+    
     .gradio-container table.metrics-table th {
-        background-color: #f9fafb;
+        background: linear-gradient(to bottom, #f9fafb, #f3f4f6);
         font-weight: 600;
+        color: #374151;
         position: sticky;
         top: 0;
         z-index: 10;
+        border-bottom: 2px solid #9ca3af;
     }
+    
+    .gradio-container table.metrics-table tbody tr:nth-child(even) {
+        background-color: #f9fafb;
+    }
+    
+    .gradio-container table.metrics-table tbody tr:hover {
+        background-color: #f3f4f6;
+    }
+    
     .gradio-container table.metrics-table {
         border-collapse: collapse;
         width: 100%;
+        background: white;
+    }
+    
+    .gradio-container table.metrics-table a {
+        color: #2563eb;
+        text-decoration: none;
+    }
+    
+    .gradio-container table.metrics-table a:hover {
+        color: #1d4ed8;
+        text-decoration: underline;
     }
+    
+    /* Scrollable table container */
     .table-container {
         overflow-x: auto;
         overflow-y: auto;
         max-height: 75vh;
-        border: 1px solid #e5e7eb;
+        border: 1px solid #d1d5db;
         border-radius: 8px;
         background: white;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    }
+    
+    /* Filter section styling */
+    .filter-section {
+        background: white;
+        padding: 20px;
+        border-radius: 8px;
+        border: 1px solid #d1d5db;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     }
+    
+    /* Info section */
     .info-section {
         max-height: 400px;
         overflow-y: auto;
         padding-right: 10px;
     }
-    .filter-section {
-        background: #f9fafb;
-        padding: 16px;
-        border-radius: 8px;
-        border: 1px solid #e5e7eb;
+    
+    /* Checkbox styling */
+    .gradio-container label.svelte-1c76wbe {
+        margin-bottom: 8px;
+    }
+    
+    /* Heading styling */
+    .gradio-container h1 {
+        color: #111827;
+        font-weight: 700;
+        margin-bottom: 24px;
+    }
+    
+    .gradio-container h3 {
+        color: #374151;
+        font-weight: 600;
+        margin-bottom: 16px;
     }
     """
 
@@ -307,7 +364,7 @@ def build_app() -> gr.Blocks:
             # Left side - Filters (narrower)
             with gr.Column(scale=2):
                 with gr.Group(elem_classes="filter-section"):
-                    gr.Markdown("### Filters")
+                    gr.Markdown("### 🎛️ Filters")
                     
                     dir_path = gr.State(RESULT_DIR)
                     
@@ -367,7 +424,7 @@ def build_app() -> gr.Blocks:
 
             # Right side - Table (wider)
             with gr.Column(scale=5):
-                leaderboard_output = gr.HTML(label="Results")
+                leaderboard_output = gr.HTML(label="📈 Results")
 
         demo.load(
             fn=auto_refresh_from_dir,