fix table display for small resolution screens

app.py

@@ -269,11 +269,10 @@ def update_table(
             ],
         }
     )
-    table_styles.append({"selector": "table", "props": [("border-collapse", "collapse"), ("border", f"1px solid var(--border-color-primary)")]})
-    for i, w in enumerate(widths):
-        table_styles.append(
-            {
-                "selector": f"th.col{i}, td.col{i}",
+    for i, w in enumerate(widths):
+        table_styles.append(
+            {
+                "selector": f"th.col{i}, td.col{i}",
                 "props": [
                     ("min-width", f"{w}px"),
                     ("max-width", f"{w}px"),
@@ -326,18 +325,26 @@ def update_table(
             ],
         }
     )
-    table_styles.append(
-        {
-            "selector": "td:last-child:hover .cell-tooltip-trigger[data-tooltip]::after",
-            "props": [
+    table_styles.append(
+        {
+            "selector": "td:last-child:hover .cell-tooltip-trigger[data-tooltip]::after",
+            "props": [
                 ("left", "auto"),
                 ("right", "0"),
                 ("transform", "none"),
             ],
-        }
-    )
-    styler = styler.set_table_styles(table_styles)
-    return styler.to_html()
+        }
+    )
+    styler = styler.set_table_styles(table_styles)
+    styler = styler.set_table_attributes(
+        'style="border-collapse: collapse; border: 1px solid var(--border-color-primary); width: max-content !important; min-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;"'
+    )
+    table_html = styler.to_html()
+    return (
+        '<div class="leaderboard-table-scroll" style="width: 100%; max-width: 100%; overflow-x: auto; padding-bottom: 4px;">'
+        f"{table_html}"
+        "</div>"
+    )
 
 
 def check_model_exists(model_id):