css: stack the two-column layout on mobile/tablet (fix broken phone layout)

The "Ask the agent" / "Open release" gr.Row stayed side-by-side on phones,
squeezing each column to ~180px so every label wrapped one character per
line. An earlier rule forces min-width:0 on the columns, which defeats
Gradio s natural wrap-on-min-width behaviour. Add a max-width:900px media
query that flips .layout-gap to flex-direction:column and makes each column
full-width, so the layout cleanly stacks on phones and narrow tablets.

app.py

@@ -1190,6 +1190,24 @@ footer { display: none !important; }
   [class*="gradio-container"] { padding: 16px !important; }
   .quest-footer { flex-direction: column; align-items: flex-start; }
 }
+/* Mobile / tablet: stack the two-column (Ask the agent | Open release)
+   layout vertically. The columns are designed for ~420px + ~340px side by
+   side; below ~900px they get squished — and because an earlier rule forces
+   `min-width: 0` on them, they squeeze instead of wrapping, collapsing text
+   to one character per line. Forcing the row to flex-direction:column makes
+   each column take the full width and stack cleanly. */
+@media (max-width: 900px) {
+  [class*="gradio-container"] .layout-gap {
+    flex-direction: column !important;
+    flex-wrap: wrap !important;
+  }
+  [class*="gradio-container"] .layout-gap > .gr-column,
+  [class*="gradio-container"] .layout-gap > div {
+    width: 100% !important;
+    max-width: 100% !important;
+    flex: 1 1 100% !important;
+  }
+}
 """