adjust column width settings

app.py

@@ -78,10 +78,11 @@ with gr.Blocks() as block:
             data_component = gr.Dataframe(
                 value=initial_data,
                 headers=initial_headers,
-                datatype=["number"] + ["html"] + ["number"] * (len(initial_headers) - 2),
+                datatype=["number", "html"] + ["number"] * (len(initial_headers) - 2),
                 interactive=False,
                 elem_classes="custom-dataframe",
                 max_height=2400,
+                column_widths=["80px", "220px"] + ["140px"] * (len(initial_headers) - 2),
             )
 
             def update_table_and_caption(table_type, super_group, model_group):
@@ -96,8 +97,9 @@ with gr.Blocks() as block:
                     gr.Dataframe(
                         value=data,
                         headers=headers,
-                        datatype=["number"] + ["html"] + ["number"] * (len(headers) - 2),
+                        datatype=["number", "html"] + ["number"] * (len(headers) - 2),
                         interactive=False,
+                        column_widths=["80px", "220px"] + ["140px"] * (len(headers) - 2),
                     ),
                     caption,
                     f"<style>{base_css}\n{table_css}</style>"

static/css/style.css

@@ -46,23 +46,56 @@
     color: var(--text-color);
 }
 
-.custom-dataframe td:first-child,
-.custom-dataframe th:first-child {
-    width: 60px !important;
-    min-width: 60px !important;
-    max-width: 60px !important;
-    text-align: center !important;
+/* Base styles for all table cells and headers */
+.custom-dataframe td,
+.custom-dataframe th {
+    padding: 8px !important;
     white-space: nowrap !important;
-    padding: 0 4px !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
 }
 
+/* Rank column */
+.custom-dataframe td:first-child,
 .custom-dataframe th:first-child {
-    font-size: 0.9em !important;
+    width: 80px !important;
+    min-width: 80px !important;
+    max-width: 80px !important;
+    text-align: center !important;
 }
 
-.custom-dataframe td:nth-child(2) {
+/* Models column */
+.custom-dataframe td:nth-child(2),
+.custom-dataframe th:nth-child(2) {
+    width: 220px !important;
     min-width: 220px !important;
-    white-space: nowrap !important;
+    max-width: 220px !important;
+}
+
+/* Overall, Core, Open-ended columns */
+.custom-dataframe td:nth-child(n+3):nth-child(-n+5),
+.custom-dataframe th:nth-child(n+3):nth-child(-n+5) {
+    width: 140px !important;
+    min-width: 140px !important;
+    max-width: 140px !important;
+    text-align: right !important;
+}
+
+/* Dimension columns */
+.custom-dataframe td:nth-child(n+6),
+.custom-dataframe th:nth-child(n+6) {
+    width: 140px !important;
+    min-width: 140px !important;
+    max-width: 140px !important;
+    text-align: right !important;
+}
+
+/* Fix header text wrapping */
+.custom-dataframe th {
+    height: auto !important;
+    line-height: 1.2 !important;
+    white-space: normal !important; /* Allow header text to wrap */
+    vertical-align: bottom !important;
 }
 
 .custom-dataframe a {