Improve dropdown titles

app.py

@@ -1051,6 +1051,26 @@ body {
   background: var(--povisle-surface) !important;
   position: relative !important;
 }
+.povisle-filter-field,
+.leaderboard-filter-field {
+  background: var(--povisle-surface) !important;
+  gap: 0 !important;
+  padding: 14px 14px 12px !important;
+}
+.povisle-filter-field .block,
+.povisle-filter-field .form,
+.povisle-filter-field .wrap,
+.povisle-filter-field .wrap-inner,
+.povisle-filter-field .input-container,
+.leaderboard-filter-field .block,
+.leaderboard-filter-field .form,
+.leaderboard-filter-field .wrap,
+.leaderboard-filter-field .wrap-inner,
+.leaderboard-filter-field .input-container {
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+}
 #leaderboard-filter-row > * + *::before {
   background: #ddd7d3;
   bottom: 18px;
@@ -1072,6 +1092,28 @@ body {
 #family-filter {
   border-left: 1px dashed #ddd7d3 !important;
 }
+#leaderboard-filter-row label,
+#leaderboard-filter-row label span,
+#leaderboard-filter-row .label-wrap,
+#leaderboard-filter-row .label-wrap span,
+#leaderboard-filter-row [data-testid="block-label"],
+#leaderboard-filter-row [data-testid="block-label"] span {
+  color: var(--povisle-ink) !important;
+  opacity: 1 !important;
+}
+#leaderboard-filter-row .label-wrap span,
+#leaderboard-filter-row [data-testid="block-label"] span {
+  font-weight: 700 !important;
+}
+#leaderboard-filter-row input,
+#leaderboard-filter-row textarea,
+#leaderboard-filter-row [role="combobox"],
+#leaderboard-filter-row [data-testid="token"],
+#leaderboard-filter-row .token,
+#leaderboard-filter-row .selected-token,
+#leaderboard-filter-row .multiselect-token {
+  color: var(--povisle-ink) !important;
+}
 #leaderboard-view-tabs {
   border: 0 !important;
   box-shadow: none !important;

views/example_view.py

@@ -132,27 +132,40 @@ def render_examples_tab(examples_df: pd.DataFrame) -> None:
         initial_subcategory = ALL_OPTION
         initial_task_type = ALL_OPTION
         initial_value = filter_examples(examples_df, initial_task_type, initial_category, initial_subcategory)
+        filter_label_style = (
+            "color: #181416; font-size: 0.86rem; font-weight: 700; "
+            "line-height: 1.2; margin: 0 0 8px;"
+        )
 
         with gr.Row(elem_id="examples-filter-row"):
-            task_type_filter = gr.Dropdown(
-                choices=TASK_TYPE_FILTER_OPTIONS,
-                value=initial_task_type,
-                multiselect=False,
-                allow_custom_value=False,
-                label="Type of task",
-            )
-            category_filter = gr.Dropdown(
-                choices=category_options(examples_df),
-                value=initial_category,
-                allow_custom_value=False,
-                label="Category",
-            )
-            subcategory_filter = gr.Dropdown(
-                choices=subcategory_options(examples_df, initial_category),
-                value=initial_subcategory,
-                allow_custom_value=False,
-                label="Subcategory",
-            )
+            with gr.Column(elem_classes=["povisle-filter-field"]):
+                gr.HTML(f'<div style="{filter_label_style}">Type of task</div>')
+                task_type_filter = gr.Dropdown(
+                    choices=TASK_TYPE_FILTER_OPTIONS,
+                    value=initial_task_type,
+                    multiselect=False,
+                    allow_custom_value=False,
+                    label="Type of task",
+                    show_label=False,
+                )
+            with gr.Column(elem_classes=["povisle-filter-field"]):
+                gr.HTML(f'<div style="{filter_label_style}">Category</div>')
+                category_filter = gr.Dropdown(
+                    choices=category_options(examples_df),
+                    value=initial_category,
+                    allow_custom_value=False,
+                    label="Category",
+                    show_label=False,
+                )
+            with gr.Column(elem_classes=["povisle-filter-field"]):
+                gr.HTML(f'<div style="{filter_label_style}">Subcategory</div>')
+                subcategory_filter = gr.Dropdown(
+                    choices=subcategory_options(examples_df, initial_category),
+                    value=initial_subcategory,
+                    allow_custom_value=False,
+                    label="Subcategory",
+                    show_label=False,
+                )
         examples_table = gr.Dataframe(
             value=initial_value,
             headers=EXAMPLE_COLUMNS,

views/leaderboard_category.py

@@ -168,31 +168,45 @@ def render_leaderboard_filters(leaderboard_df: pd.DataFrame):
             elem_id="leaderboard-search",
         )
 
+    filter_label_style = (
+        "color: #181416; font-size: 0.86rem; font-weight: 700; "
+        "line-height: 1.2; margin: 0 0 8px;"
+    )
+
     with gr.Row(elem_id="leaderboard-filter-row"):
-        type_filter = gr.Dropdown(
-            choices=[ALL_OPTION, *available_types],
-            value=[ALL_OPTION],
-            multiselect=True,
-            allow_custom_value=False,
-            label="Model Type",
-            elem_id="type-filter",
-        )
-        size_filter = gr.Dropdown(
-            choices=[ALL_OPTION, *size_options],
-            value=[ALL_OPTION],
-            multiselect=True,
-            allow_custom_value=False,
-            label="Size",
-            elem_id="size-filter",
-        )
-        family_filter = gr.Dropdown(
-            choices=[ALL_OPTION, *family_options],
-            value=[ALL_OPTION],
-            multiselect=True,
-            allow_custom_value=False,
-            label="Family",
-            elem_id="family-filter",
-        )
+        with gr.Column(elem_classes=["povisle-filter-field"]):
+            gr.HTML(f'<div style="{filter_label_style}">Model Type</div>')
+            type_filter = gr.Dropdown(
+                choices=[ALL_OPTION, *available_types],
+                value=[ALL_OPTION],
+                multiselect=True,
+                allow_custom_value=False,
+                label="Model Type",
+                show_label=False,
+                elem_id="type-filter",
+            )
+        with gr.Column(elem_classes=["povisle-filter-field"]):
+            gr.HTML(f'<div style="{filter_label_style}">Size</div>')
+            size_filter = gr.Dropdown(
+                choices=[ALL_OPTION, *size_options],
+                value=[ALL_OPTION],
+                multiselect=True,
+                allow_custom_value=False,
+                label="Size",
+                show_label=False,
+                elem_id="size-filter",
+            )
+        with gr.Column(elem_classes=["povisle-filter-field"]):
+            gr.HTML(f'<div style="{filter_label_style}">Family</div>')
+            family_filter = gr.Dropdown(
+                choices=[ALL_OPTION, *family_options],
+                value=[ALL_OPTION],
+                multiselect=True,
+                allow_custom_value=False,
+                label="Family",
+                show_label=False,
+                elem_id="family-filter",
+            )
 
     return search_box, type_filter, size_filter, family_filter