styles

app.py

@@ -56,18 +56,18 @@ def create_ui():
                         placeholder="e.g. https://huggingface.co/api/datasets/facebook/natural_reasoning/croissant"
                     )
                     fetch_btn = gr.Button("Fetch and Validate", variant="primary")
-        
-        # Now create the validation results section AFTER the input section
-        with gr.Group():
-            # Progress/status message
+            
+            # Progress/status message - moved up inside the input group
             upload_progress = gr.HTML(
                 """<div class="progress-status">Ready for validation</div>""", 
                 visible=True)
-            
+        
+        # Now create the validation results section in a separate group
+        with gr.Group():
             # Validation results
             validation_results = gr.HTML(visible=False)
         
-        # Define CSS for the validation UI with improved results fields and hints
+        # Define CSS for the validation UI
         gr.HTML("""
         <style>
         /* Set max width and center the app */
@@ -97,7 +97,7 @@ def create_ui():
             align-items: center;
             justify-content: space-between;
             cursor: pointer;
-            background-color: rgba(0, 0, 0, 0.03) !important;  /* Very subtle background */
+            background-color: rgba(0, 0, 0, 0.03) !important;
         }
 
         .step-left {
@@ -106,6 +106,7 @@ def create_ui():
             gap: 10px;
         }
 
+        /* Force text color to white in status indicators */
         .step-status {
             width: 24px;
             height: 24px;
@@ -114,7 +115,7 @@ def create_ui():
             align-items: center;
             justify-content: center;
             font-weight: bold;
-            color: white;
+            color: white !important;
         }
 
         .status-success {
@@ -127,19 +128,20 @@ def create_ui():
 
         .step-details {
             padding: 12px 15px;
-            border-top: 1px solid var(--border-color-primary, rgba(128, 128, 128, 0.1));
             background-color: var(--body-background-fill) !important;
         }
 
-        /* User hints styling - italic, smaller, no border */
+        /* User hints styling - italic, smaller, better positioned */
         .progress-status {
             font-style: italic;
             font-size: 0.9em;
             color: var(--body-text-color-subdued);
             padding: 8px 0;
+            margin-top: 5px;
             width: 100%;
             background: none !important;
             border: none !important;
+            text-align: center;
         }
 
         /* Override input containers to match page background */