Mobile fix v2: strict single-column layout, forced overflow clamp

Drops the two-column layout entirely so nothing renders side-by-side, stacks the advanced settings row on phones, and hard-clamps horizontal overflow with min-width 0 on all blocks.

app.py

@@ -435,6 +435,9 @@ def _refresh_quota(request: gr.Request):
 
 CUSTOM_CSS = """
 .gradio-container {max-width: 1180px !important; margin: 0 auto !important;}
+html, body {overflow-x: hidden !important; max-width: 100vw !important;}
+.gradio-container .block, .gradio-container .form, .gradio-container .wrap,
+.gradio-container .gap, .gradio-container .form-row, .gradio-container .component-wrapper {min-width: 0 !important; max-width: 100% !important;}
 #hero {
   background: linear-gradient(120deg, #4f46e5 0%, #7c3aed 45%, #db2777 100%);
   border-radius: 18px; padding: 26px 30px; margin-bottom: 8px;
@@ -475,12 +478,10 @@ body {overflow-x: hidden;}
   #hero {padding: 16px 14px; border-radius: 14px;}
   #hero h1 {font-size: 1.3rem;}
   #hero p {font-size: 0.82rem;}
-  #main-row {flex-direction: column !important;}
   #adv-row {flex-direction: column !important;}
   #voice-btns {flex-wrap: wrap !important; gap: 8px !important;}
   #voice-btns button {flex: 1 1 45% !important; min-width: 0 !important;}
   .gradio-container {padding: 8px !important;}
-  .block, .form, .wrap, .gap {min-width: 0 !important; max-width: 100% !important;}
   .quota-row {flex-direction: column; gap: 1px;}
   #generate-btn {height: 46px !important; font-size: 0.95rem !important;}
 }
@@ -509,40 +510,37 @@ TIPS_MD = """
 with gr.Blocks(title="Offex Voice Studio — AI Voice Cloning", theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate"), css=CUSTOM_CSS) as demo:
     gr.HTML(HEADER_HTML)
 
-    with gr.Row(elem_id="main-row"):
-        with gr.Column(scale=5):
-            reference_audio = gr.Audio(
-                label="Reference voice",
-                sources=["upload", "microphone"],
-                type="filepath",
-                value=DEFAULT_VOICE,
-            )
-            if MY_VOICES:
-                gr.Markdown("**⚡ Quick-pick — no upload needed:**")
-                with gr.Row(elem_id="voice-btns"):
-                    for label, path in MY_VOICES:
-                        gr.Button(label, size="sm").click(
-                            fn=lambda p=path: p, outputs=reference_audio
-                        )
-            with gr.Accordion("🎭 Emotion reference (optional — big boost)", open=False):
-                emotion_audio = gr.Audio(
-                    label="Emotion reference",
-                    sources=["upload", "microphone"],
-                    type="filepath",
+    reference_audio = gr.Audio(
+        label="Reference voice",
+        sources=["upload", "microphone"],
+        type="filepath",
+        value=DEFAULT_VOICE,
+    )
+    if MY_VOICES:
+        gr.Markdown("**⚡ Quick-pick — no upload needed:**")
+        with gr.Row(elem_id="voice-btns"):
+            for label, path in MY_VOICES:
+                gr.Button(label, size="sm").click(
+                    fn=lambda p=path: p, outputs=reference_audio
                 )
-        with gr.Column(scale=7):
-            text = gr.Textbox(
-                label="Text to speak",
-                placeholder="Type the text you want in the cloned voice...",
-                lines=5,
-                max_lines=12,
-            )
-            permission = gr.Checkbox(
-                label="✅ I have permission to use this voice",
-                value=False,
-            )
-            generate = gr.Button("✨ Generate Voice", variant="primary", size="lg", elem_id="generate-btn")
-            output = gr.Audio(label="🔊 Generated voice", type="filepath", autoplay=True, show_download_button=True)
+    with gr.Accordion("🎭 Emotion reference (optional — big boost)", open=False):
+        emotion_audio = gr.Audio(
+            label="Emotion reference",
+            sources=["upload", "microphone"],
+            type="filepath",
+        )
+    text = gr.Textbox(
+        label="Text to speak",
+        placeholder="Type the text you want in the cloned voice...",
+        lines=5,
+        max_lines=12,
+    )
+    permission = gr.Checkbox(
+        label="✅ I have permission to use this voice",
+        value=False,
+    )
+    generate = gr.Button("✨ Generate Voice", variant="primary", size="lg", elem_id="generate-btn")
+    output = gr.Audio(label="🔊 Generated voice", type="filepath", autoplay=True, show_download_button=True)
 
     with gr.Accordion("⚙️ Advanced settings", open=False):
         with gr.Row(elem_id="adv-row"):