:lipstick: Improve frontend

frontend/layout.py

@@ -86,9 +86,12 @@ def create_leaderboard_tab(refresh_callback: Callable = None) -> gr.TabItem:
                 )
                 filtered = filtered[mask]
 
-            # Type filter
+            # Type filter - extract just the emoji from the checkbox values
             if type_filter and len(type_filter) > 0:
-                filtered = filtered[filtered[("", "Type")].isin(type_filter)]
+                # Extract emoji by splitting on space and taking first part
+                # e.g., "0️⃣ Zero-shot" -> "0️⃣"
+                type_emojis = [t.split(' ')[0] if ' ' in t else t for t in type_filter]
+                filtered = filtered[filtered[("", "Type")].isin(type_emojis)]
 
             # Min AUC filter
             if min_auc and min_auc > 0:
@@ -164,7 +167,9 @@ def create_leaderboard_tab(refresh_callback: Callable = None) -> gr.TabItem:
                     if (top, sub) not in selected_columns:
                         continue
                     if top not in ("", None):
-                        html += f"<th class='sortable-header' data-column='{col_idx}' onclick='sortTable({col_idx})'>{sub} <span class='sort-indicator'></span></th>"
+                        # Add col-score class to AUC columns for consistent width handling
+                        extra_class = " col-score" if "AUC" in top or "ΔAUC" in top else ""
+                        html += f"<th class='sortable-header{extra_class}' data-column='{col_idx}' onclick='sortTable({col_idx})'>{sub} <span class='sort-indicator'></span></th>"
                         col_idx += 1
                 html += "</tr>"
 
@@ -204,6 +209,7 @@ def create_leaderboard_tab(refresh_callback: Callable = None) -> gr.TabItem:
 
                     # Determine CSS class based on column type
                     col_name = col[1] if isinstance(col, tuple) else col
+                    col_group = col[0] if isinstance(col, tuple) else ""
                     css_class = ""
                     if col_name == "Type":
                         css_class = "col-type"
@@ -221,7 +227,7 @@ def create_leaderboard_tab(refresh_callback: Callable = None) -> gr.TabItem:
                         css_class = "col-date"
                     elif col_name in ["Pretrained", "Zero-shot", "Few-shot"]:
                         css_class = "col-boolean"
-                    elif "AUC" in col_name or "ΔAUC" in col_name or "Avg." in col_name:
+                    elif "AUC" in col_name or "ΔAUC" in col_name or "Avg." in col_name or "AUC" in col_group or "ΔAUC" in col_group:
                         css_class = "col-score"
 
                     # Get string value for title attribute (escape quotes for HTML)
@@ -272,7 +278,17 @@ def create_leaderboard_tab(refresh_callback: Callable = None) -> gr.TabItem:
                         html += f"<td class='{css_class}'{data_value_attr}{title_attr}>{formatted_val}</td>"
 
                     else:
-                        display_val = "" if is_empty_value(val) else val
+                        # Format score values (AUC, ΔAUC) to 3 decimal places
+                        if is_empty_value(val):
+                            display_val = ""
+                        elif css_class == "col-score":
+                            # Format as float with 3 decimal places
+                            try:
+                                display_val = f"{float(val):.3f}"
+                            except (ValueError, TypeError):
+                                display_val = val
+                        else:
+                            display_val = val
                         html += f"<td class='{css_class}'{title_attr}>{display_val}</td>"
                 html += "</tr>"
             html += "</tbody></table></div>"
@@ -427,11 +443,18 @@ def create_leaderboard_tab(refresh_callback: Callable = None) -> gr.TabItem:
     min-width: 240px !important;
 }
 
-.leaderboard-table td.col-score,
-.leaderboard-table th.col-score {
-    max-width: 100px !important;
-    min-width: 80px !important;
-    text-align: center;
+table.leaderboard-table td.col-score,
+table.leaderboard-table th.col-score {
+    /* Remove all width constraints - let columns auto-size based on header text */
+    max-width: 9999px !important;
+    min-width: 0 !important;
+    text-align: center !important;
+    vertical-align: middle !important;
+    white-space: nowrap !important; /* Prevent header text from wrapping */
+    overflow: visible !important; /* Override global ellipsis */
+    text-overflow: unset !important;
+    padding-left: 12px !important;
+    padding-right: 12px !important;
 }
 
 .leaderboard-table td.col-boolean,
@@ -498,9 +521,9 @@ def create_leaderboard_tab(refresh_callback: Callable = None) -> gr.TabItem:
             with gr.Row():
                 # Type filter (multi-select checkboxes)
                 type_filter = gr.CheckboxGroup(
-                    choices=["0️⃣", "1️⃣", "⤵️", "🔼"],
+                    choices=["0️⃣ Zero-shot", "1️⃣ Few-shot", "⤵️ Pre-trained", "🔼 Models trained from scratch"],
                     label="Model Type",
-                    value=["0️⃣", "1️⃣", "⤵️", "🔼"],  # All selected by default
+                    value=["0️⃣ Zero-shot", "1️⃣ Few-shot", "⤵️ Pre-trained", "🔼 Models trained from scratch"],  # All selected by default
                     interactive=True
                 )
 

frontend/leaderboard.py

@@ -65,11 +65,20 @@ def format_parameter_count(value):
     value = float(value)
 
     if value >= 1e9:
-        return f"{value / 1e9:.1f}B"
+        # Format as integer B if rounded to 1 decimal equals the integer, otherwise 1 decimal
+        formatted = value / 1e9
+        rounded = round(formatted, 1)
+        return f"{int(rounded)}B" if rounded == int(rounded) else f"{rounded}B"
     elif value >= 1e6:
-        return f"{value / 1e6:.1f}M"
+        # Format as integer M if rounded to 1 decimal equals the integer, otherwise 1 decimal
+        formatted = value / 1e6
+        rounded = round(formatted, 1)
+        return f"{int(rounded)}M" if rounded == int(rounded) else f"{rounded}M"
     elif value >= 1e3:
-        return f"{value / 1e3:.1f}K"
+        # Format as integer K if rounded to 1 decimal equals the integer, otherwise 1 decimal
+        formatted = value / 1e3
+        rounded = round(formatted, 1)
+        return f"{int(rounded)}K" if rounded == int(rounded) else f"{rounded}K"
     else:
         return str(int(value))
 

frontend/styles.css

@@ -138,7 +138,7 @@ a:active {
   min-width: 100%;
   border-collapse: separate;  /* important */
   border-spacing: 0;          /* keeps it looking like collapse */
-  table-layout: fixed;
+  table-layout: auto;  /* Allow columns to size based on content */
   border: none !important;
 }