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

Fix page width shrinking when voice accordion collapses

Browse Source 
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>
This commit is contained in:
dekun
2026-06-12 19:44:41 +08:00
parent fbfca0b890
commit 22a87a4322
1 changed files with 52 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+52 -9
View File
@@ -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="",