Unify leaderboard table column widths

src/display/css_html_js.py

@@ -7,6 +7,9 @@ custom_css = """
     --bench-panel: #f8fafc;
     --bench-blue: #2563eb;
     --bench-teal: #0f766e;
+    --leaderboard-model-column-width: 180px;
+    --leaderboard-metric-column-width: 118px;
+    --leaderboard-rank-table-min-width: 1620px;
 }
 .gradio-container {
     max-width: 1320px !important;
@@ -72,15 +75,12 @@ custom_css = """
 }
 .dataframe,
 .leaderboard-dataframe {
-    --leaderboard-model-column-width: 220px;
     --cell-width-0: var(--leaderboard-model-column-width) !important;
     border-radius: 8px !important;
     overflow: hidden !important;
     border: 1px solid var(--bench-line) !important;
 }
 .rank-leaderboard-dataframe {
-    --leaderboard-model-column-width: 180px;
-    --leaderboard-rank-table-min-width: 1620px;
     --cell-width-0: var(--leaderboard-model-column-width) !important;
 }
 .dataframe table,
@@ -192,7 +192,7 @@ custom_css = """
 .rank-html-table,
 .domain-rank-table {
     width: 100% !important;
-    min-width: 1800px !important;
+    min-width: var(--leaderboard-rank-table-min-width) !important;
     table-layout: fixed !important;
     border-collapse: separate !important;
     border-spacing: 0 !important;
@@ -234,9 +234,9 @@ custom_css = """
     background: #ffffff !important;
 }
 .rank-html-table .rank-fixed-column {
-    width: 180px !important;
-    min-width: 180px !important;
-    max-width: 180px !important;
+    width: var(--leaderboard-model-column-width) !important;
+    min-width: var(--leaderboard-model-column-width) !important;
+    max-width: var(--leaderboard-model-column-width) !important;
 }
 .domain-rank-table .domain-rank-model-column {
     width: auto !important;
@@ -292,6 +292,22 @@ custom_css = """
     overflow-y: hidden !important;
     white-space: nowrap !important;
 }
+
+.leaderboard-dataframe.leaderboard-model-col-1 {
+    --cell-width-0: var(--leaderboard-metric-column-width) !important;
+    --cell-width-1: var(--leaderboard-model-column-width) !important;
+}
+.leaderboard-dataframe.leaderboard-model-col-1 th:first-child,
+.leaderboard-dataframe.leaderboard-model-col-1 td:first-child,
+.leaderboard-dataframe.leaderboard-model-col-1 [role="columnheader"]:first-child,
+.leaderboard-dataframe.leaderboard-model-col-1 [role="gridcell"]:first-child,
+.leaderboard-dataframe.leaderboard-model-col-1 .table-wrap th:first-child .cell-wrap,
+.leaderboard-dataframe.leaderboard-model-col-1 .table-wrap td:first-child .cell-wrap {
+    width: var(--leaderboard-metric-column-width) !important;
+    min-width: var(--leaderboard-metric-column-width) !important;
+    max-width: var(--leaderboard-metric-column-width) !important;
+}
+
 .leaderboard-dataframe.leaderboard-model-col-1 th:nth-child(2),
 .leaderboard-dataframe.leaderboard-model-col-1 td:nth-child(2),
 .leaderboard-dataframe.leaderboard-model-col-1 [role="columnheader"]:nth-child(2),