Refine rank label and score inputs

app.py

@@ -86,6 +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")
                     hard_rank_button = gr.Button(
                         "Hard",
                         variant="primary",
@@ -119,22 +120,28 @@ with demo:
                         with gr.Column(scale=0, min_width=230, elem_classes="score-pair-card"):
                             gr.Markdown(label, elem_classes="score-pair-label")
                             with gr.Row(elem_classes="score-inline-inputs"):
-                                hard_input = gr.Number(
-                                    label="Hard",
-                                    precision=1,
-                                    minimum=0,
-                                    maximum=100,
-                                    scale=0,
-                                    min_width=96,
-                                )
-                                easy_input = gr.Number(
-                                    label="Easy",
-                                    precision=1,
-                                    minimum=0,
-                                    maximum=100,
-                                    scale=0,
-                                    min_width=96,
-                                )
+                                with gr.Column(scale=0, min_width=88, elem_classes="score-inline-field"):
+                                    gr.Markdown("Hard", elem_classes="score-inline-field-label")
+                                    hard_input = gr.Textbox(
+                                        show_label=False,
+                                        container=False,
+                                        placeholder="0.0",
+                                        max_lines=1,
+                                        scale=0,
+                                        min_width=88,
+                                        elem_classes="score-value-input",
+                                    )
+                                with gr.Column(scale=0, min_width=88, elem_classes="score-inline-field"):
+                                    gr.Markdown("Easy", elem_classes="score-inline-field-label")
+                                    easy_input = gr.Textbox(
+                                        show_label=False,
+                                        container=False,
+                                        placeholder="0.0",
+                                        max_lines=1,
+                                        scale=0,
+                                        min_width=88,
+                                        elem_classes="score-value-input",
+                                    )
                         score_inputs.extend([hard_input, easy_input])
 
             submit_button = gr.Button("Submit Result")

src/display/css_html_js.py

@@ -143,21 +143,52 @@ custom_css = """
 .score-inline-inputs {
     flex-wrap: nowrap !important;
     gap: 8px;
+    align-items: flex-end;
 }
 
 .score-inline-inputs > * {
     flex: 0 0 auto !important;
 }
 
-.score-inline-inputs label {
+.score-inline-field {
     gap: 4px;
+    min-width: 88px !important;
+    max-width: 88px !important;
 }
 
-.score-inline-inputs label > span {
+.score-inline-field-label p {
+    margin: 0;
     font-size: 12px !important;
     text-align: center;
+    font-weight: 600;
+}
+
+.score-value-input {
+    min-width: 88px;
+    max-width: 88px;
+}
+
+.score-value-input textarea,
+.score-value-input input {
+    width: 100% !important;
+    min-width: 88px !important;
+    max-width: 88px !important;
+    text-align: center;
+}
+
+.rank-by-label {
+    margin: 0 !important;
+    align-self: center;
+}
+
+.rank-by-label p {
+    margin: 0;
+    font-size: 13px !important;
+    font-weight: 600;
+    line-height: 1;
 }
 
+.score-inline-inputs textarea,
 .score-inline-inputs input {
     text-align: center;
 }