Align models and Parameters to the left on the 'Other Models' tab

app.py

@@ -68,8 +68,10 @@ def make_leaderboard_tab(state: Simulator, name: str, html: str=None):
 
         if name == "Other Models":
             show = False
+            elem_classes = "dataframe-leaderboard dataframe-other-models"
         else:
             show = True
+            elem_classes = "dataframe-leaderboard"
         # main leaderboard content
         leaderboard = gr.DataFrame(
             value=filter_leaderboard(C.DEFAULT_TASK, C.DEFAULT_BENCHMARK, C.DEFAULT_MODEL_TYPE, "", C.DEFAULT_MAX_PARAMS, state, name),
@@ -79,7 +81,7 @@ def make_leaderboard_tab(state: Simulator, name: str, html: str=None):
             datatype=["html", "html"],
             interactive=False,
             column_widths=["7%", "28%", "13%", "10%", "13%", "10%", "14%"],
-            elem_classes="dataframe-leaderboard",
+            elem_classes=elem_classes,
         )
 
         # caption for the Base vs Instruct models

style/css_html_js.py

@@ -159,6 +159,25 @@ input[role="listbox"] {
   text-align: left    !important;
 }
 
+.dataframe-other-models tbody td:nth-child(2),
+.dataframe-other-models tbody td:nth-child(3) {
+  text-align: left !important;
+}
+
+.dataframe-other-models thead th:nth-child(2) .cell-wrap,
+.dataframe-other-models thead th:nth-child(2) .header-content,
+.dataframe-other-models thead th:nth-child(2) .header-button,
+.dataframe-other-models thead th:nth-child(2) .header-text,
+.dataframe-other-models thead th:nth-child(2) .header-button span,
+.dataframe-other-models thead th:nth-child(3) .cell-wrap,
+.dataframe-other-models thead th:nth-child(3) .header-content,
+.dataframe-other-models thead th:nth-child(3) .header-button,
+.dataframe-other-models thead th:nth-child(3) .header-text,
+.dataframe-other-models thead th:nth-child(3) .header-button span {
+  justify-content: flex-start !important;
+  text-align: left    !important;
+}
+
 .gradio-container .contain {
 flex-grow: 0;
 }