Update styles.py

styles.py

@@ -1158,32 +1158,128 @@ def get_css_styles():
         }
 
         /* Responsive styles */
-        @media (max-width: 768px) {
-            .container { width: 100% !important; padding: 10px !important; }
-            .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
-            .tab-nav { display: flex; flex-wrap: nowrap; }
-            .tab-nav button { 
-                white-space: nowrap;
-                padding: clamp(8px, 2vw, 16px) !important;
-            }
-            .image-container img {
-                max-width: 100% !important;
-                height: auto !important;
-            }
-            .flex-container { flex-direction: column !important; }
-            .upload-box { min-height: 120px !important; }
-            .gradio-group { margin: 8px 0 !important; }
-            
-            /* Improve touch targets */
-            button, select, input[type="checkbox"] {
-                min-height: 44px !important;
-                min-width: 44px !important;
-            }
-            
-            /* Responsive typography */
-            h1 { font-size: clamp(1.8rem, 4vw, 2.5em) !important; }
-            h2 { font-size: clamp(1rem, 2vw, 1.2em) !important; }
-            p { font-size: clamp(0.8rem, 1.5vw, 0.9em) !important; }
+        @media screen and (max-width: 768px) {
+        /* Base container adjustments */
+        .gradio-container {
+            width: 100% !important;
+            min-width: 100% !important;
+            max-width: 100% !important;
+            padding: 0 !important;
+            margin: 0 !important;
+        }
+
+        /* Tabs improvements */
+        .tabs.svelte-710i53 {
+            overflow-x: auto !important;
+            flex-wrap: nowrap !important;
+            scrollbar-width: none !important;
+            -ms-overflow-style: none !important;
+        }
+
+        .tabs.svelte-710i53::-webkit-scrollbar {
+            display: none !important;
+        }
+
+        /* Layout fixes */
+        .gradio-row {
+            flex-direction: column !important;
+            gap: 10px !important;
+        }
+
+        .gradio-column {
+            width: 100% !important;
+            min-width: 100% !important;
+        }
+
+        /* Image components */
+        .upload-box, .image-container {
+            width: 100% !important;
+            max-width: 100% !important;
+            min-height: 200px !important;
+        }
+
+        /* Form elements */
+        input, select, button {
+            min-height: 44px !important;
+            font-size: 16px !important; /* Prevents iOS zoom */
+        }
+
+        /* Card adjustments */
+        .dog-info-card {
+            margin: 10px 0 !important;
+            width: 100% !important;
+        }
+
+        /* Typography */
+        h1 { 
+            font-size: max(24px, min(5vw, 32px)) !important;
+            line-height: 1.2 !important;
+            margin: 10px 0 !important;
+        }
+        
+        h2 { 
+            font-size: max(18px, min(4vw, 24px)) !important;
+            line-height: 1.3 !important;
+        }
+        
+        p, span, div { 
+            font-size: max(14px, min(3.5vw, 16px)) !important;
+            line-height: 1.4 !important;
+        }
+
+        /* Specific Gradio component fixes */
+        .gr-form {
+            flex-direction: column !important;
+        }
+
+        .gr-box {
+            border-radius: 8px !important;
+            margin: 8px 0 !important;
+        }
+
+        .gr-panel {
+            padding: 10px !important;
+        }
+
+        /* Fix for overlapping elements */
+        .fixed-height {
+            height: auto !important;
+            min-height: 0 !important;
+        }
+
+        /* Better touch targets */
+        .gr-button {
+            padding: 12px 16px !important;
+            margin: 4px !important;
+            height: auto !important;
+        }
+
+        /* Improve scrolling */
+        .scroll-hide {
+            -ms-overflow-style: none !important;
+            scrollbar-width: none !important;
+        }
+        
+        .scroll-hide::-webkit-scrollbar {
+            display: none !important;
+        }
+    }
+
+    /* Additional fixes for very small screens */
+    @media screen and (max-width: 480px) {
+        .gr-padded {
+            padding: 8px !important;
+        }
+        
+        .gr-gap {
+            gap: 8px !important;
+        }
+
+        /* Ensure images don't overflow */
+        img {
+            max-width: 100% !important;
+            height: auto !important;
         }
+    }
         
         """