cosmetics

app.py

@@ -54,6 +54,10 @@ def create_ui():
         # Define CSS for the validation UI
         gr.HTML("""
         <style>
+        .gradio-container {
+            max-width: 800px;
+            margin: 0 auto;
+        }
         .validation-step {
             margin-bottom: 15px;
             border: 1px solid #e0e0e0;
@@ -66,7 +70,11 @@ def create_ui():
             display: flex;
             align-items: center;
             cursor: pointer;
-            justify-content: space-between;
+        }
+        .step-left {
+            display: flex;
+            align-items: center;
+            flex-grow: 1;
         }
         .step-status {
             margin-right: 10px;
@@ -81,34 +89,8 @@ def create_ui():
             font-size: 16px;
             text-shadow: 0px 0px 1px rgba(0,0,0,0.5);
         }
-        .status-waiting {
-            background-color: #9e9e9e;
-        }
-        .status-success {
-            background-color: #4caf50;
-        }
-        .status-error {
-            background-color: #f44336;
-        }
-        .step-title {
-            font-weight: 500;
-        }
-        .step-details {
-            padding: 15px;
-            background-color: #fafafa;
-            border-top: 1px solid #e0e0e0;
-            white-space: pre-wrap;
-            font-family: monospace;
-            max-height: 300px;
-            overflow-y: auto;
-        }
-        .progress-container {
-            margin: 10px 0;
-            font-weight: 500;
-            text-align: center;
-        }
         .arrow-indicator {
-            margin-left: auto;
+            margin-left: 10px;
             font-size: 16px;
             transition: transform 0.3s ease;
         }
@@ -146,11 +128,11 @@ def create_ui():
                 html += f'''
                 <div class="validation-step" id="step-{i}">
                     <div class="step-header" onclick="toggleDetails('{i}')">
-                        <div class="step-left" style="display: flex; align-items: center;">
+                        <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>
                         </div>
-                        <div class="arrow-indicator" id="arrow-{i}">▶</div>
                     </div>
                     <div class="step-details" id="details-{i}" style="display: none;">
                         {message}