Inline rank label with toggle buttons

app.py

@@ -86,7 +86,7 @@ with demo:
             rank_state = gr.State(DEFAULT_RANK_BY)
             with gr.Column(elem_id="benchmark-board-shell"):
                 with gr.Row(elem_id="benchmark-rank-toolbar"):
-                    gr.Markdown("**Rank By:**", elem_classes="rank-by-label")
+                    gr.HTML('<span class="rank-by-inline-text">Rank By:</span>', elem_classes="rank-by-label")
                     hard_rank_button = gr.Button(
                         "Hard",
                         variant="primary",

src/display/css_html_js.py

@@ -179,9 +179,20 @@ custom_css = """
 .rank-by-label {
     margin: 0 !important;
     align-self: center;
+    min-width: 0 !important;
+    width: auto !important;
 }
 
-.rank-by-label p {
+.rank-by-label .html-container,
+.rank-by-label .html-container > div,
+.rank-by-label .prose {
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+.rank-by-inline-text {
+    display: inline-block;
+    white-space: nowrap;
     margin: 0;
     font-size: 13px !important;
     font-weight: 600;
@@ -204,6 +215,7 @@ custom_css = """
     z-index: 20;
     width: auto;
     gap: 8px;
+    justify-content: flex-end;
     align-items: center;
 }