Update app.py

app.py

@@ -9,28 +9,38 @@ from components.food_suggestions import render_food_guide
 from components.doctor_info import render_doctor_list
 from components.how_to_use import render_how_to_use_guide
 
-# --- Style and Theme with ENHANCED Mobile-Responsive CSS ---
+# --- Style and Theme with NEW, MORE AGGRESSIVE Mobile-Responsive CSS ---
 css = """
 /* General container style for all screens */
 .gradio-container { max-width: 1000px !important; margin: auto !important; }
 .centered-text { text-align: center; }
 
 /* --- CRITICAL FIX FOR BUTTON TEXT IN DARK MODE --- */
-/* Force the text color of primary and secondary buttons to be white */
 .gradio-button.primary, .gradio-button.secondary {
   color: white !important;
 }
 
 /* --- ENHANCED MOBILE-RESPONSIVE RULES --- */
-/* This rule applies ONLY when the screen width is 768px or less */
+/* This rule applies ONLY when the screen width is 768px or less (tablets and phones) */
 @media (max-width: 768px) {
   /* Find all rows inside the Gradio app */
   .gradio-row {
     /* Change the layout from horizontal to vertical */
     flex-direction: column !important;
-    /* Add a small gap between the stacked elements for breathing room */
+    /* Add a small gap between the stacked elements */
     gap: 1rem !important;
   }
+  
+  /* --- NEW AND MOST IMPORTANT RULE --- */
+  /* This rule targets every direct child (column) inside a row */
+  .gradio-row > * {
+    /* Force the column to take up the full width of the screen */
+    width: 100% !important;
+    /* Remove any strange minimum width settings Gradio might apply */
+    min-width: unset !important;
+    /* Ensure there's no leftover margin that could cause issues */
+    margin: 0 !important;
+  }
 }
 """
 with gr.Blocks(title="DiaSpark: Your Health Management Platform", css=css) as demo: