Improve mobile responsiveness and styling in ui_utils.py by adding new CSS rules for headers, buttons, and layout adjustments. Enhance table and component styling for better usability on small screens.

ui_utils.py

@@ -315,52 +315,108 @@ CLEAN_CSS = """
 
 /* Horizontal scroll for tables on small screens */
 @media screen and (max-width: 480px) {
-    .gr-dataframe {
-        border-radius: 4px !important;
+    .main-header {
+        padding: 0.75rem 0.5rem !important;
+        border-radius: 6px !important;
+        margin-bottom: 0.75rem !important;
     }
-    
-    .gr-dataframe table {
-        min-width: 500px !important;
+    .main-header h1 {
+        font-size: 1.2rem !important;
+        margin-bottom: 0.25rem !important;
+    }
+    .main-header p {
         font-size: 0.8rem !important;
     }
-    
-    .gr-dataframe th,
-    .gr-dataframe td {
+    .status-info {
         padding: 0.4rem !important;
+        font-size: 0.75rem !important;
+        border-radius: 4px !important;
     }
-    
-    .main-header h1 {
-        font-size: 1.5rem !important;
+    .gradio-container {
+        padding: 0 2px !important;
+        max-width: 100vw !important;
     }
-    
-    .main-header p {
-        font-size: 0.9rem !important;
+    .gradio-row, .gradio-column {
+        gap: 0.25rem !important;
     }
-    
-    .gradio-tabs .tab-nav button {
-        min-width: 100px !important;
+    .gradio-row .gr-button, .gradio-row button, .gr-button {
+        padding: 0.5rem !important;
         font-size: 0.8rem !important;
-        padding: 0.4rem 0.6rem !important;
+        min-width: 90px !important;
+        border-radius: 6px !important;
     }
-    
-    /* Very small screen adjustments */
-    .gradio-container {
-        padding: 0 5px !important;
+    .gr-dropdown, .gr-textbox, .gr-slider {
+        width: 100% !important;
+        font-size: 0.85rem !important;
     }
-    
-    .main-header {
-        padding: 1rem 0.75rem !important;
+    .gr-dropdown label, .gr-textbox label, .gr-slider label {
+        font-size: 0.8rem !important;
     }
-    
-    .status-info {
-        padding: 0.6rem !important;
+    .gr-dataframe {
+        overflow-x: auto !important;
+        font-size: 0.75rem !important;
+        border-radius: 3px !important;
+    }
+    .gr-dataframe table {
+        min-width: 350px !important;
+        font-size: 0.75rem !important;
+    }
+    .gr-dataframe th, .gr-dataframe td {
+        padding: 0.3rem !important;
+        white-space: pre-line !important;
+        word-break: break-word !important;
+    }
+    .gradio-tabs .tab-nav button {
+        min-width: 80px !important;
+        font-size: 0.75rem !important;
+        padding: 0.3rem 0.5rem !important;
+    }
+    .gr-html, .gr-html * {
         font-size: 0.8rem !important;
+        word-break: break-word !important;
     }
-    
-    /* Compact button layout for very small screens */
-    .gradio-row .gr-button {
-        padding: 0.6rem !important;
-        font-size: 0.85rem !important;
+    .gr-html div[style*="padding: 20px"] {
+        padding: 8px !important;
+    }
+    .evaluation-card {
+        padding: 8px !important;
+        margin: 4px 0 !important;
+        border-radius: 5px !important;
+    }
+    .gr-checkbox-group label {
+        font-size: 0.75rem !important;
+        padding: 0.3rem !important;
+    }
+    .gr-slider {
+        margin: 0.2rem 0 !important;
+    }
+    .gradio-row .gr-button, .gradio-row button {
+        width: 100% !important;
+        margin: 0.15rem 0 !important;
+    }
+    .gradio-tabs .tab-nav {
+        flex-wrap: nowrap !important;
+        overflow-x: auto !important;
+        scrollbar-width: thin !important;
+    }
+    .gradio-tabs {
+        overflow-x: auto !important;
+    }
+    .gr-html div[style*="grid-template-columns"] {
+        display: block !important;
+    }
+    .gr-html div[style*="grid-template-columns"] > div {
+        margin-bottom: 0.5rem !important;
+    }
+    .gr-html div[style*="color: green"],
+    .gr-html div[style*="color: red"],
+    .gr-html div[style*="color: orange"] {
+        margin: 0.25rem 0 !important;
+        border-radius: 4px !important;
+    }
+    .gradio-container > div:last-child {
+        font-size: 0.7rem !important;
+        padding: 8px !important;
     }
 }