updated leaderboard

app.py

@@ -84,7 +84,7 @@ def create_leaderboard_interface():
         gr.HTML(TITLE)
         
         # Minimizable description section
-        with gr.Accordion("📖 Description", open=False):
+        with gr.Accordion("📖 Description", open=False, elem_id="description-accordion"):
             gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text", elem_id="description-text")
         
         # Get filter options
@@ -163,7 +163,7 @@ def create_leaderboard_interface():
         results_table = gr.Dataframe(
             value=df_values,
             headers=df_headers,
-            label="Overall Rankings",
+            label="",
             interactive=False,  # Disable editing but keep select events
             elem_id="results-table"
         )
@@ -190,12 +190,12 @@ def create_leaderboard_interface():
                     )
         
         # About section
-        with gr.Accordion("📖 About MUSED-FM Leaderboard", open=False):
+        with gr.Accordion("📖 About MUSED-FM Leaderboard", open=False, elem_id="about-accordion"):
             gr.Markdown(BENCHMARKS_TEXT, elem_classes="markdown-text", elem_id="about-text")
         
         # Citation section
         with gr.Row():
-            with gr.Accordion("📙 Citation", open=False):
+            with gr.Accordion("📙 Citation", open=False, elem_id="citation-accordion"):
                 citation_button = gr.Textbox(
                     value=CITATION_BUTTON_TEXT,
                     label=CITATION_BUTTON_LABEL,

src/about.py

@@ -9,7 +9,7 @@ TITLE = """
 """
 
 INTRODUCTION_TEXT = """
-<div style="font-size: 20px; line-height: 1.6;">
+<div style="font-size: 16px; line-height: 1.6;">
 Welcome to the MUSED-FM Leaderboard! This leaderboard provides comprehensive evaluation results of multivariate time series forecasting. Rows are models and columns are performance metrics.
 Use the filters below to explore results by different criteria and compare model performance across various domains and categories. For additional details on the models, click on the models to access the Model Inspector below the table.
 Metrics are explained in "About MUSED-FM Leaderboard" below the table.
@@ -30,7 +30,7 @@ High performance on these datasets provides evidence that a model can utilize hi
 """
 
 BENCHMARKS_TEXT = """
-<div style="font-size: 20px; line-height: 1.6;">
+<div style="font-size: 16px; line-height: 1.6;">
 
 ## Evaluation Metrics
 

src/display/css_html_js.py

@@ -182,7 +182,7 @@ custom_css = """
     outline: none !important;
 }
 
-/* Target the specific filter elements - full width */
+/* Target the specific filter elements - consistent height and padding */
 #model-search,
 #category-filter,
 #domain-filter,
@@ -196,9 +196,11 @@ custom_css = """
     min-width: 0 !important;
     max-width: none !important;
     margin: 0 !important;
-    padding: 4px 8px !important;
+    padding: 0 !important;
     box-shadow: none !important;
     outline: none !important;
+    height: auto !important;
+    min-height: auto !important;
 }
 
 #model-search {
@@ -222,7 +224,7 @@ custom_css = """
     outline: none !important;
 }
 
-/* Target all input and select elements within filters */
+/* Target all input and select elements within filters - fix vertical alignment */
 #filter-row input,
 #filter-row select,
 #filter-row .gradio-textbox,
@@ -232,6 +234,63 @@ custom_css = """
     box-shadow: none !important;
     outline: none !important;
     border-radius: 0 !important;
+    height: auto !important;
+    min-height: 28px !important;
+    max-height: 32px !important;
+    padding: 4px 6px !important;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    vertical-align: top !important;
+    font-size: 14px !important;
+    display: block !important;
+    visibility: visible !important;
+}
+
+/* Specifically target text input for proper alignment and styling */
+#filter-row .gradio-textbox,
+#model-search {
+    height: auto !important;
+    min-height: 28px !important;
+    max-height: 80px !important;
+    font-size: 14px !important;
+    line-height: 5px !important;
+    display: block !important;
+    visibility: visible !important;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    border: none !important;
+    border-bottom: none !important;
+    border-top: none !important;
+    border-left: none !important;
+    border-right: none !important;
+    background: transparent !important;
+    background-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+    text-decoration: none !important;
+}
+
+/* Target the actual input element inside the textbox */
+#filter-row .gradio-textbox input,
+#model-search input,
+#filter-row input[type="text"] {
+    border: none !important;
+    border-bottom: none !important;
+    border-top: none !important;
+    border-left: none !important;
+    border-right: none !important;
+    background: transparent !important;
+    background-color: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+    text-decoration: none !important;
+    height: auto !important;
+    min-height: 28px !important;
+    max-height: 32px !important;
+    padding: 4px 6px !important;
+    margin: 0 !important;
+    font-size: 14px !important;
+    line-height: 10.2 !important;
 }
 
 /* Remove any grey backgrounds from the specific filter containers */
@@ -335,10 +394,18 @@ html {
     margin-bottom: 10px !important;
 }
 
-/* Reduce spacing in accordion content */
-.gradio-container .gradio-accordion .gradio-markdown {
-    margin: 5px 0 !important;
-    padding: 5px !important;
+/* Larger text for description content */
+#description-text,
+.markdown-text {
+    font-size: 18px !important;
+    line-height: 1.6 !important;
+}
+
+/* Target description accordion specifically */
+.gradio-container .gradio-accordion .gradio-markdown p,
+.gradio-container .gradio-accordion .gradio-markdown div {
+    font-size: 18px !important;
+    line-height: 1.6 !important;
 }
 
 /* Aggressive removal of all grey backgrounds */
@@ -361,4 +428,86 @@ html {
     flex-wrap: nowrap !important;
     flex-direction: row !important;
 }
+
+/* Larger dropdown labels */
+.gradio-container .gradio-form label,
+.gradio-container .gradio-panel label,
+.gradio-container .gradio-block label {
+    font-size: 18px !important;
+    font-weight: bold !important;
+}
+
+/* Target specific filter labels */
+#model-search label,
+#category-filter label,
+#domain-filter label,
+#dataset-filter label,
+#sort-filter label {
+    font-size: 18px !important;
+    font-weight: bold !important;
+}
+
+/* Larger accordion labels - targeting specific IDs */
+#description-accordion button,
+#about-accordion button,
+#citation-accordion button,
+#model-inspector button {
+    font-size: 20px !important;
+    font-weight: bold !important;
+}
+
+/* Target accordion button spans */
+#description-accordion button span,
+#about-accordion button span,
+#citation-accordion button span,
+#model-inspector button span {
+    font-size: 20px !important;
+    font-weight: bold !important;
+}
+
+/* Force all accordion labels to be larger */
+.gradio-container .gradio-accordion button {
+    font-size: 20px !important;
+    font-weight: bold !important;
+}
+
+.gradio-container .gradio-accordion button span {
+    font-size: 20px !important;
+    font-weight: bold !important;
+}
+
+/* Fix horizontal alignment - remove form container padding */
+.gradio-container .gradio-form,
+.gradio-container .gradio-panel,
+.gradio-container .gradio-block {
+    padding: 0 !important;
+    margin: 0 !important;
+    text-align: left !important;
+}
+
+/* Align input fields directly under labels */
+#model-search,
+#category-filter,
+#domain-filter,
+#dataset-filter,
+#sort-filter {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    text-align: left !important;
+}
+
+/* Target the form containers specifically - consistent spacing */
+#model-search .gradio-form,
+#category-filter .gradio-form,
+#domain-filter .gradio-form,
+#dataset-filter .gradio-form,
+#sort-filter .gradio-form {
+    padding: 0 !important;
+    margin: 0 !important;
+    text-align: left !important;
+    height: auto !important;
+    min-height: auto !important;
+}
 """