Add row navigation

app.py

@@ -36,6 +36,26 @@ SYSTEM_PROMPT_PATH = PROMPTS_DIR / "system_prompt.txt"
 USER_PROMPT_TEMPLATE_PATH = PROMPTS_DIR / "user_prompt_template.json"
 SYSTEM_CRITERIA_PROMPT_PATH = PROMPTS_DIR / "system_criteria_prompt.txt"
 USER_CRITERIA_TEMPLATE_PATH = PROMPTS_DIR / "user_criteria_template.json"
+ROW_NAVIGATION_CSS = """
+.row-navigation {
+    align-items: center !important;
+    gap: 0.5rem !important;
+}
+.row-navigation-label,
+.row-navigation-context {
+    flex: 0 0 auto !important;
+    min-width: max-content !important;
+}
+.row-navigation-label p,
+.row-navigation-context p {
+    margin: 0 !important;
+}
+.row-navigation-input {
+    flex: 0 0 4.5rem !important;
+    min-width: 4.5rem !important;
+    max-width: 4.5rem !important;
+}
+"""
 
 
 def patch_asyncio_invalid_fd_cleanup() -> None:
@@ -1741,18 +1761,27 @@ with gr.Blocks(title="Scientific Article Screener") as demo:
 
         # WORKSPACE (previous middle + right, wider)
         with gr.Column(scale=2):
-            with gr.Row():
+            with gr.Row(elem_classes="row-navigation"):
+                gr.Markdown(
+                    "**Row**",
+                    elem_classes="row-navigation-label",
+                )
                 row_number_input = gr.Number(
-                    label="Row",
                     value=None,
+                    show_label=False,
+                    container=False,
                     minimum=1,
                     step=1,
                     precision=0,
                     interactive=True,
-                    scale=1,
-                    min_width=100,
+                    scale=0,
+                    min_width=70,
+                    elem_classes="row-navigation-input",
+                )
+                row_counter = gr.Markdown(
+                    "No row selected.",
+                    elem_classes="row-navigation-context",
                 )
-                row_counter = gr.Markdown("No row selected.")
                 go_to_row_btn = gr.Button("Go", scale=0, min_width=70)
             article_url_md = gr.Markdown("")
             article_details_md = gr.Markdown("")
@@ -1976,6 +2005,7 @@ if __name__ == "__main__":
     auth_config = get_auth_config()
     demo.launch(
         auth=auth_config,
+        css=ROW_NAVIGATION_CSS,
         allowed_paths=[
             str(APP_STORAGE_ROOT.resolve()),
         ],

tests/test_app.py

@@ -95,6 +95,9 @@ class ReviewFieldsTests(unittest.TestCase):
         self.assertTrue(app.decision_box.interactive)
         self.assertTrue(app.inclusion_rationale_box.interactive)
         self.assertTrue(all(component.interactive for component in app.extracted_inputs))
+        self.assertFalse(app.row_number_input.show_label)
+        self.assertFalse(app.row_number_input.container)
+        self.assertEqual(app.row_number_input.min_width, 70)
 
         labels = {
             component.get("props", {}).get("label")