From 22a87a4322a8724da4232cb0d6e419df6df1d9a1 Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Fri, 12 Jun 2026 19:44:41 +0800
Subject: [PATCH] Fix page width shrinking when voice accordion collapses

Lock one-click layout to full width with CSS grid toolbar and prevent shrink-to-fit on tab and panel containers.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 app.py | 61 +++++++++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 52 insertions(+), 9 deletions(-)

diff --git a/app.py b/app.py
index 78d7df1..2cc7d9a 100644
--- a/app.py
+++ b/app.py
@@ -1092,6 +1092,24 @@ gradio-app,
 .oneclick-hero-sep { color: #64748b !important; margin: 0 6px !important; }
 .oneclick-body {
     padding: 16px 20px 20px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    align-self: stretch !important;
+}
+/* 防止折叠音色后整页随内容收缩变窄 */
+.gradio-container .tabitem,
+.gradio-container .oneclick-panel,
+.gradio-container .oneclick-panel > .wrap,
+.gradio-container .oneclick-panel > .form,
+.gradio-container .oneclick-body,
+.gradio-container .oneclick-body > .wrap,
+.gradio-container .oneclick-body > .form,
+.gradio-container .oneclick-body .row,
+.gradio-container .oneclick-body .gr-row {
+    width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+    align-self: stretch !important;
 }
 .oneclick-input-grid {
     display: grid !important;
@@ -1154,33 +1172,55 @@ gradio-app,
     resize: none !important;
 }
 .oneclick-toolbar {
-    display: flex !important;
-    flex-wrap: wrap !important;
-    align-items: center !important;
+    display: grid !important;
+    grid-template-columns: auto minmax(0, 1fr) 190px !important;
+    align-items: start !important;
     gap: 12px 16px !important;
     padding: 12px 14px !important;
     margin-bottom: 14px !important;
     background: #111827 !important;
     border: 1px solid #374151 !important;
     border-radius: 10px !important;
+    width: 100% !important;
+    min-width: 100% !important;
+    flex-wrap: nowrap !important;
+}
+.oneclick-toolbar > .column,
+.oneclick-toolbar > .gr-column,
+.oneclick-toolbar > div {
+    min-width: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+}
+.oneclick-voice-col {
+    width: 100% !important;
+    min-width: 0 !important;
 }
 .oneclick-toolbar .block { margin: 0 !important; padding: 0 !important; }
 .oneclick-toolbar .accordion,
 .oneclick-toolbar .gr-accordion {
-    flex: 1 1 280px !important;
+    width: 100% !important;
+    min-width: 0 !important;
     margin: 0 !important;
     border: 1px solid #4b5563 !important;
     border-radius: 8px !important;
 }
+.oneclick-toolbar .accordion .content,
+.oneclick-toolbar .gr-accordion .content {
+    width: 100% !important;
+}
 .oneclick-toolbar .accordion > .label-wrap,
 .oneclick-toolbar .gr-accordion .label-wrap {
     background: #1a2332 !important;
     padding: 8px 12px !important;
     min-height: unset !important;
+    width: 100% !important;
 }
 .oneclick-run-btn {
-    flex: 0 0 auto !important;
-    min-width: 180px !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 190px !important;
+    justify-self: end !important;
 }
 .oneclick-run-btn button {
     width: 100% !important;
@@ -1218,9 +1258,12 @@ gradio-app,
         grid-template-columns: 1fr !important;
     }
     .oneclick-toolbar {
-        flex-direction: column !important;
+        grid-template-columns: 1fr !important;
+    }
+    .oneclick-run-btn {
+        max-width: 100% !important;
+        justify-self: stretch !important;
     }
-    .oneclick-run-btn { width: 100% !important; }
 }
 
 .gradio-container button.primary,
@@ -1531,7 +1574,7 @@ def build_app() -> gr.Blocks:
                                 value=False,
                                 scale=0,
                             )
-                            with gr.Column(scale=1):
+                            with gr.Column(scale=1, elem_classes=["oneclick-voice-col"]):
                                 with gr.Accordion("🎚️ 配音音色", open=False):
                                     pipe_voice = gr.Radio(
                                         label="",