Update app.py

app.py

@@ -151,16 +151,18 @@ def create_reranking_interface(task_data):
             ranking_inputs = []
             validation_indicators = []
             
-            # Add back the quick ranking tools with improved styling - more compact layout
-            with gr.Row(equal_height=True, elem_classes=["tool-row"]):
-                with gr.Column(scale=2):
-                    gr.Markdown("### Quick Tools:", elem_classes=["tool-heading"])
-                with gr.Column(scale=2):
-                    sequential_btn = gr.Button("1,2,3...", variant="secondary", size="sm")
-                with gr.Column(scale=2):
-                    reverse_btn = gr.Button("n,n-1...", variant="secondary", size="sm")
-                with gr.Column(scale=2):
-                    clear_btn = gr.Button("Clear All", variant="secondary", size="sm")
+            # Create a clean header with explanatory labels for quick ranking tools
+            gr.Markdown("### Quick Ranking Tools", elem_classes=["tools-header"])
+            with gr.Box(elem_classes=["tools-container"]):
+                with gr.Row(equal_height=True):
+                    with gr.Column(scale=4):
+                        sequential_btn = gr.Button("Rank 1,2,3... (Sequential)", variant="secondary")
+                    with gr.Column(scale=4):
+                        reverse_btn = gr.Button("Rank n,n-1... (Reverse)", variant="secondary")
+                    with gr.Column(scale=3):
+                        clear_btn = gr.Button("Clear All Rankings", variant="secondary")
+                with gr.Row():
+                    gr.Markdown("<small>Use these buttons to quickly assign rankings to all documents at once.</small>", elem_classes=["tools-help"])
             
             # Make document textboxes much smaller
             with gr.Box():
@@ -247,26 +249,26 @@ def create_reranking_interface(task_data):
                 box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
             }
             
-            .tool-container {
-                margin-bottom: 10px !important;
+            .tools-container {
                 background-color: #f8f9fa !important;
                 border-left: 4px solid #6c757d !important;
-                padding: 5px !important;
-            }
-            
-            .tool-row {
-                background-color: #f0f0f0 !important;
+                padding: 10px !important;
+                margin-bottom: 15px !important;
                 border-radius: 5px !important;
-                padding: 5px !important;
-                margin-bottom: 10px !important;
-                align-items: center !important;
             }
             
-            .tool-heading {
-                margin: 0 !important;
-                padding-top: 5px !important;
-                font-size: 16px !important;
+            .tools-header {
+                margin-bottom: 5px !important;
                 font-weight: bold !important;
+                color: #333 !important;
+                border-bottom: 1px solid #ddd !important;
+                padding-bottom: 5px !important;
+            }
+            
+            .tools-help {
+                color: #666 !important;
+                margin-top: 5px !important;
+                text-align: center !important;
             }
             
             .section-header {