Update app.py

mobile friendly

app.py

@@ -1004,22 +1004,25 @@ custom_css = """
     margin: 0 !important;
     background-color: #000000 !important;
     color: #ffffff !important;
+    overflow-x: hidden !important; /* Prevent horizontal scroll on mobile */
 }
 
 /* Remove padding and ensure full-width components */
 .response-area, .input-area, .history-display, .analytics-display {
-    padding: 0 !important;
+    padding: 8px !important; /* Reduced padding for mobile */
     margin: 0 !important;
     width: 100% !important;
     box-sizing: border-box !important;
     border: 1px solid #333333 !important;
+    border-radius: 4px !important; /* Subtle rounding for modern look */
 }
 
-/* Textbox and input styling */
+/* Textbox and output styling */
 .response-area, .history-display, .analytics-display {
     background-color: #1a1a1a !important;
     color: #ffffff !important;
-    border-radius: 0 !important;
+    min-height: 150px !important; /* Smaller height for mobile */
+    overflow-y: auto !important; /* Smooth scrolling for long outputs */
 }
 
 /* Input area */
@@ -1027,12 +1030,13 @@ custom_css = """
     background-color: #1a1a1a !important;
     color: #ffffff !important;
     border: 1px solid #333333 !important;
+    min-height: 80px !important; /* Compact for mobile journaling */
 }
 
 /* Font styling */
 * {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
-    font-size: 16px !important;
+    font-size: 16px !important; /* Default for desktop */
 }
 
 /* Button styling */
@@ -1040,6 +1044,9 @@ button {
     background-color: #333333 !important;
     color: #ffffff !important;
     border: 1px solid #555555 !important;
+    padding: 10px !important; /* Slightly larger for touch */
+    min-height: 44px !important; /* WCAG-compliant touch target */
+    border-radius: 4px !important;
 }
 button:hover {
     background-color: #555555 !important;
@@ -1050,11 +1057,57 @@ select {
     background-color: #1a1a1a !important;
     color: #ffffff !important;
     border: 1px solid #333333 !important;
+    padding: 8px !important;
+    min-height: 44px !important; /* Touch-friendly */
 }
 
 /* Markdown text */
 .markdown {
     color: #ffffff !important;
+    line-height: 1.5 !important; /* Better readability */
+}
+
+/* Mobile-specific adjustments */
+@media (max-width: 600px) {
+    * {
+        font-size: 14px !important; /* Smaller fonts for mobile */
+    }
+    .gradio-container {
+        padding: 8px !important; /* Minimal padding for breathing room */
+    }
+    .response-area, .history-display, .analytics-display {
+        min-height: 100px !important; /* Compact outputs */
+        padding: 6px !important;
+    }
+    .input-area {
+        min-height: 60px !important; /* Smaller input box */
+    }
+    button, select {
+        padding: 8px !important;
+        font-size: 13px !important;
+        min-height: 40px !important; /* Slightly smaller but still touch-friendly */
+    }
+    /* Stack rows vertically on mobile */
+    .gr-row {
+        flex-direction: column !important;
+        gap: 8px !important;
+    }
+    .gr-column {
+        width: 100% !important; /* Full width for inputs like topic */
+    }
+}
+
+/* Tablet adjustments */
+@media (min-width: 601px) and (max-width: 1024px) {
+    * {
+        font-size: 15px !important; /* Middle ground for tablets */
+    }
+    .response-area, .history-display, .analytics-display {
+        min-height: 120px !important;
+    }
+    .input-area {
+        min-height: 70px !important;
+    }
 }
 """