Center align metrics, left align the rest

app.py

@@ -281,13 +281,14 @@ with gr.Blocks(
                 interactive=False,
                 column_widths=[
                     "7%",
-                    "29%",
+                    "23%",
                     "17%",
                     "9%",
                     "12%",
                     "9%",
-                    "17%",
+                    "12%",
                 ],
+                elem_classes="dataframe-leaderboard",
             )
 
         with gr.Tab("Plot View"):

style/css_html_js.py

@@ -123,6 +123,41 @@ input[role="listbox"] {
 .metrics-page p {
     text-align: left !important;
 }
+.dataframe-leaderboard td,
+.dataframe-leaderboard th {
+  text-align: center !important;
+  vertical-align: middle !important;
+}
+
+.dataframe-leaderboard th .cell-wrap,
+.dataframe-leaderboard th .header-content,
+.dataframe-leaderboard th .header-button,
+.dataframe-leaderboard th .header-text,
+.dataframe-leaderboard th .header-button span {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  text-align: center !important;
+}
+
+.dataframe-leaderboard tbody td:nth-child(3),
+.dataframe-leaderboard tbody td:nth-child(4) {
+  text-align: left !important;
+}
+
+.dataframe-leaderboard thead th:nth-child(3) .cell-wrap,
+.dataframe-leaderboard thead th:nth-child(3) .header-content,
+.dataframe-leaderboard thead th:nth-child(3) .header-button,
+.dataframe-leaderboard thead th:nth-child(3) .header-text,
+.dataframe-leaderboard thead th:nth-child(3) .header-button span,
+.dataframe-leaderboard thead th:nth-child(4) .cell-wrap,
+.dataframe-leaderboard thead th:nth-child(4) .header-content,
+.dataframe-leaderboard thead th:nth-child(4) .header-button,
+.dataframe-leaderboard thead th:nth-child(4) .header-text,
+.dataframe-leaderboard thead th:nth-child(4) .header-button span {
+  justify-content: flex-start !important;
+  text-align: left    !important;
+}
 """
 
 get_window_url_params = """