makeup

app.py

@@ -82,7 +82,7 @@ def create_ui():
             validation_progress = gr.HTML(visible=False)
             
             # Collapsible report section
-            with gr.Accordion("Download full validation report ▶", visible=False, open=False) as report_group:
+            with gr.Accordion("Download full validation report", visible=False, open=False) as report_group:
                 with gr.Column():
                     report_md = gr.File(
                         label="Download Report",
@@ -229,13 +229,50 @@ def create_ui():
             display: flex;
             align-items: center;
             gap: 8px;
+            padding-right: 32px;  /* Make room for the arrow */
         }
         .gr-accordion > .label-wrap::after {
             content: "▶";
             position: absolute;
             right: 16px;
+            top: 50%;
+            transform: translateY(-50%);
             transition: transform 0.3s ease;
+            font-size: 0.8em;
         }
+        .gr-accordion[data-open=true] > .label-wrap::after {
+            transform: translateY(-50%) rotate(90deg);
+        }
+
+        /* Consistent arrow styling for both validation steps and accordion */
+        .validation-step .step-header,
+        .gr-accordion > .label-wrap {
+            position: relative;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .validation-step .arrow-indicator,
+        .gr-accordion > .label-wrap::after {
+            content: "▶";
+            font-size: 0.8em;
+            margin-left: 8px;
+            transition: transform 0.3s ease;
+        }
+
+        /* Remove absolute positioning and right alignment for accordion arrow */
+        .gr-accordion > .label-wrap {
+            padding-right: 0;  /* Remove extra padding */
+        }
+        .gr-accordion > .label-wrap::after {
+            position: static;  /* Remove absolute positioning */
+            right: auto;
+            transform: none;
+        }
+
+        /* Consistent rotation for expanded state */
+        .validation-step .arrow-down,
         .gr-accordion[data-open=true] > .label-wrap::after {
             transform: rotate(90deg);
         }
@@ -392,8 +429,8 @@ def create_ui():
                         }}">
                         <div class="step-left">
                             <div class="step-status {status_class}">{status_icon}</div>
-                            <div class="step-title">{test_name}</div>
-                            <div class="arrow-indicator" id="arrow-{i}">▶</div>
+                            <span class="step-title">{test_name}</span>
+                            <span class="arrow-indicator" id="arrow-{i}">▶</span>
                         </div>
                     </div>
                     <div class="step-details" id="details-{i}" style="display: none;">