Update app.py

app.py

@@ -10,11 +10,24 @@ from components.doctor_info import render_doctor_list
 from components.how_to_use import render_how_to_use_guide
 
 # --- Style and Theme ---
+# --- Style and Theme with NEW Mobile-Responsive CSS ---
 css = """
+/* General container style for all screens */
 .gradio-container { max-width: 1000px !important; margin: auto !important; }
 .centered-text { text-align: center; }
-"""
 
+/* --- THIS IS THE NEW MOBILE-RESPONSIVE RULE --- */
+/* This rule applies ONLY when the screen width is 600px or less */
+@media (max-width: 600px) {
+  /* 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 */
+    gap: 1rem !important;
+  }
+}
+"""
 with gr.Blocks(title="DiaSpark: Your Health Management Platform", css=css) as demo:
 
     user_state = gr.State({"email": None, "id": None, "logged_in": False, "gender": None, "username": None})