Scale down desktop layout on mobile using CSS zoom

app.py

@@ -1208,15 +1208,27 @@ custom_css = """
     font-family: Helvetica, Arial, sans-serif !important;
 }
 
-/* Force desktop layout on all devices */
-body, .gradio-container, .main, .contain {
-    min-width: 900px !important;
-}
-
 .task-btn {
     min-width: 150px !important;
 }
 
+/* Scale down on mobile to show desktop layout */
+@media screen and (max-width: 768px) {
+    .gradio-container {
+        zoom: 0.8;
+        -moz-transform: scale(0.8);
+        -moz-transform-origin: 0 0;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .gradio-container {
+        zoom: 0.65;
+        -moz-transform: scale(0.65);
+        -moz-transform-origin: 0 0;
+    }
+}
+
 /* Expandable plot styles */
 .expandable-plot {
     min-height: 400px !important;