Update app.py

app.py

@@ -100,8 +100,8 @@ def gradio_fn(message, history):
 with gr.Blocks(css="""
     :root { --chat-w: 520px; }
 
+    /* ---------- Desktop / Tablet (default) ---------- */
     html, body { height: 100%; margin: 0; }
-    /* Desktop / tablet (default) */
     body {
         background:
           linear-gradient(0deg, rgba(0,0,0,.28), rgba(0,0,0,.28)),
@@ -122,36 +122,40 @@ with gr.Blocks(css="""
     }
     .chatbot { height: 480px !important; overflow-y: auto; }
 
-    /* ======== MOBILE PORTRAIT: chat only ======== */
-    @media (max-width: 720px) and (orientation: portrait) {
-      /* remove page scroll and any background art */
-      html, body { overflow: hidden; }
-      body { background: #0e0e10; }  /* solid bg; no image */
+    /* ---------- MOBILE PORTRAIT: CHAT ONLY ---------- */
+    @media (max-width: 750px) and (orientation: portrait) {
+      html, body { height: 100svh; overflow: hidden; }    /* use small viewport height on mobile */
+      body { background: #0e0e10 !important; }            /* no image on mobile */
 
-      /* make the app full-screen and edge-to-edge */
+      /* make the app full screen and remove padding/borders */
       .gradio-container {
-          max-width: 100vw;
-          width: 100vw;
-          height: 100vh;
-          margin: 0;
-          padding: 8px 10px;
-          border-radius: 0;
-          background: transparent;      /* no glass */
-          backdrop-filter: none;
+          max-width: 100vw !important;
+          width: 100vw !important;
+          height: 100svh !important;
+          margin: 0 !important;
+          padding: 0 !important;
+          border-radius: 0 !important;
+          background: #0e0e10 !important;
+          backdrop-filter: none !important;
       }
 
-      /* hide header + examples so only chat is visible */
+      /* hide header + any example chips/buttons */
       #header { display: none !important; }
-      .examples, [class*="examples"], [data-testid="examples"] { display: none !important; }
-
-      /* stretch the chat area to fill the screen */
-      .chatbot {
-          height: calc(100vh - 110px) !important;  /* room for input bar */
-          overflow-y: auto;
+      [data-testid*="examples"],
+      .examples,
+      [class*="examples"] { display: none !important; }
+
+      /* stretch the Chatbot to fill the viewport (leaving room for the input bar) */
+      .gradio-container .gr-chatbot,
+      .gradio-container .chatbot {
+          height: calc(100svh - 110px) !important; /* tweak 110px if your input bar is taller/shorter */
+          max-height: calc(100svh - 110px) !important;
+          overflow-y: auto !important;
       }
 
-      /* hide any component labels/titles that take space */
-      .gradio-container .label { display: none !important; }
+      /* kill any stray labels/titles */
+      .gradio-container .label, 
+      .gradio-container [data-testid="block-label"] { display: none !important; }
     }
 """) as demo:
 
@@ -166,19 +170,16 @@ with gr.Blocks(css="""
 
     gr.ChatInterface(
         fn=gradio_fn,
-        examples=[
-            "Hello!",
-            "How can I overcome fear of failure?",
-            "How do I forgive someone who hurt me deeply?",
-            "What can I do to stop overthinking?"
-        ],
+        # remove examples entirely to avoid chips on mobile
+        examples=None,
         chatbot=gr.Chatbot(
             type="messages",
             elem_classes="chatbot",
-            show_label=False            # no "Chatbot" title bar
+            show_label=False
         ),
         type="messages",
     )
 
 if __name__ == "__main__":
     demo.launch()
+