make more mobile friendly

assets/styles.css

@@ -53,9 +53,8 @@
   overflow: visible;
   display: inline-flex !important;
   align-items: center !important;
-  padding: 6px 12px !important;
+  /* padding: 6px 12px !important; */
   font-size: 14px !important;
-  margin: 0 auto !important;
   background-color: #AC482A !important; /* restore previous button color */
   color: #FFFFFF !important;
   border-radius: 5px !important;
@@ -293,6 +292,44 @@ button[id^="download-"]:focus {
   color: #082030;
 }
 
+/* Leaderboard table column sizing to avoid % column getting squished */
+.leaderboard-table th.rank-col { width: 6%; }
+.leaderboard-table th.name-col { width: 30%; }
+.leaderboard-table th.metadata-col { width: 40%; }
+.leaderboard-table th.percent-col { width: 24%; }
+
+/* Ensure body cells follow header widths and metadata wraps */
+.leaderboard-table td.metadata-cell {
+  white-space: normal;
+  word-break: break-word;
+  vertical-align: middle;
+}
+
+.leaderboard-table td.percent-cell {
+  vertical-align: middle;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+/* Make inner progress bar fill available cell width */
+.leaderboard-table td.percent-cell > div {
+  width: 100% !important;
+  box-sizing: border-box;
+}
+
+/* On narrow screens, relax fixed layout so table can flow naturally */
+@media (max-width: 720px) {
+  .leaderboard-table {
+    table-layout: auto !important;
+  }
+  .leaderboard-table th.rank-col,
+  .leaderboard-table th.name-col,
+  .leaderboard-table th.metadata-col,
+  .leaderboard-table th.percent-col {
+    width: auto !important;
+  }
+}
+
 @media (max-width: 1150px) {
     .responsive-main-content {
         flex-direction: column !important;

graphs/leaderboard.py

@@ -238,61 +238,74 @@ def render_table_content(
         [
             # Add download button above the table
             df_to_download_link(download_df, filename),
-            html.Table(
-                [
-                    html.Thead(
-                        html.Tr(
-                            [
-                                html.Th(
-                                    "Rank",
-                                    style={
-                                        "backgroundColor": "#F0F0F0",
-                                        "textAlign": "left",
-                                    },
-                                ),
-                                html.Th(
-                                    "Name",
-                                    style={
-                                        "backgroundColor": "#F0F0F0",
-                                        "textAlign": "left",
-                                    },
-                                ),
-                                html.Th(
-                                    "Metadata",
-                                    style={
-                                        "backgroundColor": "#F0F0F0",
-                                        "textAlign": "left",
-                                        "marginRight": "10px",
-                                    },
-                                ),
-                                html.Th(
-                                    "% of Total",
-                                    style={
-                                        "backgroundColor": "#F0F0F0",
-                                        "textAlign": "left",
-                                    },
-                                ),
-                            ]
-                        )
-                    ),
-                    html.Tbody(
-                        [
+            # Wrap the table in a horizontal scroll container so the table can be wide
+            html.Div(
+                # scroll wrapper
+                html.Table(
+                    [
+                        html.Thead(
                             html.Tr(
                                 [
-                                    html.Td(idx + 1, style={"textAlign": "center"}),
-                                    html.Td(row["Name"], style={"textAlign": "left"}),
-                                    html.Td(render_chips(row["Metadata"], chip_color)),
-                                    html.Td(
-                                        progress_bar(row["% of total"], bar_color),
-                                        style={"textAlign": "center"},
+                                    html.Th(
+                                        "Rank",
+                                        className="rank-col",
+                                        style={
+                                            "backgroundColor": "#F0F0F0",
+                                            "textAlign": "left",
+                                        },
+                                    ),
+                                    html.Th(
+                                        "Name",
+                                        className="name-col",
+                                        style={
+                                            "backgroundColor": "#F0F0F0",
+                                            "textAlign": "left",
+                                        },
+                                    ),
+                                    html.Th(
+                                        "Metadata",
+                                        className="metadata-col",
+                                        style={
+                                            "backgroundColor": "#F0F0F0",
+                                            "textAlign": "left",
+                                            "marginRight": "10px",
+                                        },
+                                    ),
+                                    html.Th(
+                                        "% of Total",
+                                        className="percent-col",
+                                        style={
+                                            "backgroundColor": "#F0F0F0",
+                                            "textAlign": "left",
+                                        },
                                     ),
                                 ]
                             )
-                            for idx, row in df.iterrows()
-                        ]
-                    ),
-                ],
-                style={"borderCollapse": "collapse", "width": "100%"},
+                        ),
+                        html.Tbody(
+                            [
+                                html.Tr(
+                                    [
+                                        html.Td(idx + 1, style={"textAlign": "center"}),
+                                        html.Td(row["Name"], className="name-cell", style={"textAlign": "left"}),
+                                        html.Td(render_chips(row["Metadata"], chip_color), className="metadata-cell", style={"textAlign": "left", "whiteSpace": "normal", "wordBreak": "break-word"}),
+                                        html.Td(
+                                            progress_bar(row["% of total"], bar_color),
+                                            className="percent-cell",
+                                            style={"textAlign": "center", "minWidth": "180px", "padding": "8px"},
+                                        ),
+                                    ]
+                                )
+                                for idx, row in df.iterrows()
+                            ]
+                        ),
+                    ],
+                    # allow the table to be wider than its container (minWidth prevents squish)
+                    style={"borderCollapse": "collapse", "width": "100%", "minWidth": "980px", "tableLayout": "auto"},
+                    className="leaderboard-table",
+                ),
+                className="leaderboard-scroll-wrapper",
+                style={"overflowX": "auto", "-webkit-overflow-scrolling": "touch", "width": "100%"},
             ),
         ]
     )