Fix layout width when voice accordion collapses

Lock gradio-container to 1800px on desktop, stretch outer flex instead of center-shrink, and move voice accordion to its own full-width row.

Co-authored-by: Cursor <cursoragent@cursor.com>

app.py

@@ -580,30 +580,34 @@ html, body {
     overflow-x: hidden !important;
 }
 
-/* 外层全宽背景，内容区水平居中 */
+/* 外层全宽背景，子元素拉伸占满视口（避免 align-items:center 随内容收缩变窄） */
 gradio-app,
 .gradio-app,
 #main,
 .app,
 .fillable,
-.contain {
+.contain,
+.container {
     width: 100% !important;
     max-width: 100% !important;
     display: flex !important;
     flex-direction: column !important;
-    align-items: center !important;
+    align-items: stretch !important;
     justify-content: flex-start !important;
     background: #0f1419 !important;
     box-sizing: border-box !important;
 }
 
-/* 核心内容容器居中 — 最大宽度 1800px */
+/* 核心内容容器 — 桌面端固定 1800px（折叠音色时不随内容变窄） */
 .gradio-container {
     background: #0f1419 !important;
     color: #eef2f7 !important;
     font-size: 15px !important;
-    width: 100% !important;
+    width: min(1800px, 96vw) !important;
+    min-width: min(1800px, 96vw) !important;
     max-width: min(1800px, 96vw) !important;
+    flex: 0 0 auto !important;
+    align-self: center !important;
     margin-left: auto !important;
     margin-right: auto !important;
     padding: 16px clamp(12px, 2vw, 28px) !important;
@@ -614,6 +618,8 @@ gradio-app,
 /* 平板 */
 @media (max-width: 1024px) {
     .gradio-container {
+        width: 100% !important;
+        min-width: 100% !important;
         max-width: 100% !important;
         padding: 14px 18px !important;
     }
@@ -622,6 +628,8 @@ gradio-app,
 /* 手机 */
 @media (max-width: 640px) {
     .gradio-container {
+        width: 100% !important;
+        min-width: 100% !important;
         max-width: 100% !important;
         padding: 10px 12px !important;
         font-size: 14px !important;
@@ -647,7 +655,7 @@ gradio-app,
     .oneclick-input-grid > div,
     .oneclick-bottom-grid,
     .oneclick-bottom-grid > div,
-    .oneclick-toolbar {
+    .oneclick-action-row {
         flex-direction: column !important;
         width: 100% !important;
     }
@@ -1011,6 +1019,18 @@ gradio-app,
     border-color: #374151 !important;
 }
 
+/* Tabs 全宽，避免 Tab 内容区 shrink-to-fit */
+.gradio-container .tabs,
+.gradio-container .main-nav-tabs,
+.gradio-container .tabitem,
+.gradio-container .tab-content,
+.gradio-container [role="tabpanel"] {
+    width: 100% !important;
+    min-width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+}
+
 /* 主导航 Tab 均匀分布（兼容 Gradio 4/5） */
 .gradio-container .tab-nav {
     display: flex !important;
@@ -1171,11 +1191,34 @@ gradio-app,
     border-radius: 8px !important;
     resize: none !important;
 }
-.oneclick-toolbar {
+/* 配音音色 — 独立全宽行，折叠不影响页面宽度 */
-    display: grid !important;
+.oneclick-voice-accordion {
-    grid-template-columns: auto minmax(0, 1fr) 190px !important;
+    width: 100% !important;
-    align-items: start !important;
+    min-width: 100% !important;
-    gap: 12px 16px !important;
+    margin-bottom: 12px !important;
+    border: 1px solid #374151 !important;
+    border-radius: 10px !important;
+    background: #111827 !important;
+}
+.oneclick-voice-accordion > .label-wrap,
+.oneclick-voice-accordion .label-wrap {
+    width: 100% !important;
+    background: #1a2332 !important;
+    padding: 10px 14px !important;
+}
+.oneclick-voice-accordion .content {
+    width: 100% !important;
+    padding: 8px 12px 12px !important;
+}
+.oneclick-voice-accordion .block { margin: 0 !important; padding: 0 !important; }
+
+/* 操作行：跳过润色 + 启动按钮 */
+.oneclick-action-row {
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    gap: 16px !important;
     padding: 12px 14px !important;
     margin-bottom: 14px !important;
     background: #111827 !important;
@@ -1185,46 +1228,24 @@ gradio-app,
     min-width: 100% !important;
     flex-wrap: nowrap !important;
 }
-.oneclick-toolbar > .column,
+.oneclick-action-row > .column,
-.oneclick-toolbar > .gr-column,
+.oneclick-action-row > .gr-column,
-.oneclick-toolbar > div {
+.oneclick-action-row > .block,
+.oneclick-action-row > div {
+    flex: 0 0 auto !important;
+    width: auto !important;
     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 {
-    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 {
-    width: 100% !important;
+    flex: 0 0 auto !important;
-    min-width: 0 !important;
+    width: auto !important;
-    max-width: 190px !important;
+    min-width: 190px !important;
-    justify-self: end !important;
+    margin-left: auto !important;
 }
 .oneclick-run-btn button {
     width: 100% !important;
-    padding: 12px 20px !important;
+    min-width: 190px !important;
+    padding: 12px 24px !important;
     font-size: 1rem !important;
     border-radius: 8px !important;
 }
@@ -1257,12 +1278,17 @@ gradio-app,
     .oneclick-bottom-grid {
         grid-template-columns: 1fr !important;
     }
-    .oneclick-toolbar {
+    .oneclick-action-row {
-        grid-template-columns: 1fr !important;
+        flex-direction: column !important;
+        align-items: stretch !important;
     }
     .oneclick-run-btn {
-        max-width: 100% !important;
+        width: 100% !important;
-        justify-self: stretch !important;
+        min-width: 0 !important;
+        margin-left: 0 !important;
+    }
+    .oneclick-run-btn button {
+        min-width: 0 !important;
     }
 }
 
@@ -1541,6 +1567,7 @@ def build_app() -> gr.Blocks:
     """构建 Gradio 主界面。"""
     with gr.Blocks(
         title="Trading Studio | 交易复盘配音中控",
+        fill_width=True,
     ) as demo:
         with gr.Tabs(elem_classes=["main-nav-tabs"]):
             # ---- Tab 1: 一键生成（默认首页）----
@@ -1568,21 +1595,26 @@ def build_app() -> gr.Blocks:
                                     placeholder="已有转写可直接粘贴，留空则 Whisper 识别",
                                     elem_classes=["bright-input"],
                                 )
-                        with gr.Row(elem_classes=["oneclick-toolbar"]):
+                        with gr.Accordion(
+                            "🎚️ 配音音色",
+                            open=False,
+                            elem_classes=["oneclick-voice-accordion"],
+                        ):
+                            pipe_voice = gr.Radio(
+                                label="",
+                                choices=voice_choice_labels(),
+                                value=default_voice_label(),
+                                elem_classes=["voice-radio"],
+                            )
+                        with gr.Row(elem_classes=["oneclick-action-row"]):
                             skip_polish_cb = gr.Checkbox(
                                 label="跳过 Gemma4 润色",
                                 value=False,
                                 scale=0,
                             )
-                            with gr.Column(scale=1, elem_classes=["oneclick-voice-col"]):
+                            with gr.Column(
-                                with gr.Accordion("🎚️ 配音音色", open=False):
+                                scale=0, min_width=190, elem_classes=["oneclick-run-btn"]
-                                    pipe_voice = gr.Radio(
+                            ):
-                                        label="",
-                                        choices=voice_choice_labels(),
-                                        value=default_voice_label(),
-                                        elem_classes=["voice-radio"],
-                                    )
-                            with gr.Column(scale=0, min_width=180, elem_classes=["oneclick-run-btn"]):
                                 pipeline_btn = gr.Button(
                                     "▶ 启动全流程", variant="primary"
                                 )