dekun/Trading_Studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix layout width when voice accordion collapses

Browse Source 
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>
This commit is contained in:
dekun
2026-06-12 19:49:33 +08:00
parent 22a87a4322
commit d26bec085c
1 changed files with 91 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+90 -58
View File
@@ -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;
grid-template-columns: auto minmax(0, 1fr) 190px !important;
align-items: start !important;
gap: 12px 16px !important;
/* 配音音色 — 独立全宽行，折叠不影响页面宽度 */
.oneclick-voice-accordion {
width: 100% !important;
min-width: 100% !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-toolbar > .gr-column,
.oneclick-toolbar > div {
.oneclick-action-row > .column,
.oneclick-action-row > .gr-column,
.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;
min-width: 0 !important;
max-width: 190px !important;
justify-self: end !important;
flex: 0 0 auto !important;
width: auto !important;
min-width: 190px !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 {
grid-template-columns: 1fr !important;
.oneclick-action-row {
flex-direction: column !important;
align-items: stretch !important;
}
.oneclick-run-btn {
max-width: 100% !important;
justify-self: stretch !important;
width: 100% !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"]):
skip_polish_cb = gr.Checkbox(
label="跳过 Gemma4 润色",
value=False,
scale=0,
)
with gr.Column(scale=1, elem_classes=["oneclick-voice-col"]):
with gr.Accordion("🎚️ 配音音色", open=False):
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.Column(scale=0, min_width=180, elem_classes=["oneclick-run-btn"]):
with gr.Row(elem_classes=["oneclick-action-row"]):
skip_polish_cb = gr.Checkbox(
label="跳过 Gemma4 润色",
value=False,
scale=0,
)
with gr.Column(
scale=0, min_width=190, elem_classes=["oneclick-run-btn"]
):
pipeline_btn = gr.Button(
"▶ 启动全流程", variant="primary"
)