From 94b82060243316758b5cc282b65ed4bc777b79f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A5=88=E6=84=BFQiii?= <2297740147@qq.com> Date: Mon, 19 Oct 2026 13:24:29 +0800 Subject: [PATCH] fix(ux): fix layout text overflow, 100vw window blowouts, and edge sticking - Add padding-inline and box-sizing to .v2-new-copy and .v2-new-conversation-body to prevent text from touching window borders on narrow viewports - Fix width: 100vw in application-preview.css and thread-context.css causing horizontal window overflow and scrollbar clipping - Make task configuration definition list responsive under 520px with min-width: 0 and overflow-wrap - Add overflow-wrap and word-break to setting row detail span, and relax row collapse breakpoint to 580px - Add flex-shrink: 0 to sidebar thread group folder icons and min-width: 0 to titles to preserve layout on long workspace names Co-authored-by: Gemini --- web/src/v2/components/application-preview.css | 2 +- web/src/v2/components/settings.css | 4 ++-- web/src/v2/components/task-configuration.css | 9 +++++++-- web/src/v2/components/thread-context.css | 2 +- web/src/v2/styles.css | 13 +++++++------ 5 files changed, 18 insertions(+), 12 deletions(-) diff --git a/web/src/v2/components/application-preview.css b/web/src/v2/components/application-preview.css index aa162fd79..b1bcbbf0a 100644 --- a/web/src/v2/components/application-preview.css +++ b/web/src/v2/components/application-preview.css @@ -35,4 +35,4 @@ .v2-preview-element { display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--v2-border); } .v2-preview-element > span { flex:1; min-width:70px; overflow-wrap:anywhere; } .v2-preview-element input { width:45%; } -@media (max-width:600px) { .v2-app-preview { width:100vw; padding:14px; } .v2-preview-element { flex-wrap:wrap; } } +@media (max-width:600px) { .v2-app-preview { box-sizing:border-box; width:100%; max-width:100vw; padding:14px; } .v2-preview-element { flex-wrap:wrap; } } diff --git a/web/src/v2/components/settings.css b/web/src/v2/components/settings.css index 6572d1744..c17e168cc 100644 --- a/web/src/v2/components/settings.css +++ b/web/src/v2/components/settings.css @@ -32,7 +32,7 @@ .v2-setting-row + .v2-setting-row::before { background: var(--v2-border); content: ""; height: 1px; left: 15px; position: absolute; right: 15px; top: 0; } .v2-setting-row > div:first-child { display: grid; flex: 1; gap: 3px; min-width: 0; } .v2-setting-row > div:first-child strong { font-weight: 600; } -.v2-setting-row > div:first-child span { color: var(--v2-muted); font-size: 13px; line-height: 1.6; } +.v2-setting-row > div:first-child span { color: var(--v2-muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; word-break: break-word; } .v2-setting-value { align-items: center; color: var(--v2-muted); display: flex; flex: 0 1 auto; gap: 8px; max-width: 48%; } .v2-setting-value code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-setting-value button, @@ -425,7 +425,7 @@ .v2-permission-settings-card .v2-permission-options { grid-template-columns: 1fr; } } -@media (max-width: 480px) { +@media (max-width: 580px) { .v2-setting-row { align-items: stretch; flex-direction: column; gap: 10px; padding-block: 14px; } .v2-setting-value { align-self: flex-start; max-width: 100%; flex-wrap: wrap; } } diff --git a/web/src/v2/components/task-configuration.css b/web/src/v2/components/task-configuration.css index 83903e68f..7f8fc19d0 100644 --- a/web/src/v2/components/task-configuration.css +++ b/web/src/v2/components/task-configuration.css @@ -13,10 +13,15 @@ .v2-task-configuration input:focus-visible, .v2-task-configuration button:focus-visible, .v2-task-configuration summary:focus-visible { outline:2px solid var(--v2-accent); outline-offset:3px; } .v2-task-configuration-help, .v2-task-configuration small { color:var(--v2-muted); font-size:12px; } .v2-task-configuration dl { margin:8px 0; } -.v2-task-configuration dl > div { display:grid; grid-template-columns:minmax(140px, 1fr) minmax(100px, 2fr); gap:12px; padding:6px 0; border-bottom:1px solid var(--v2-border); } +.v2-task-configuration dl > div { display:grid; grid-template-columns:minmax(140px, 1fr) minmax(100px, 2fr); gap:12px; padding:6px 0; border-bottom:1px solid var(--v2-border); min-width:0; } .v2-task-configuration dt { color:var(--v2-muted); } -.v2-task-configuration dd { margin:0; } +.v2-task-configuration dd { margin:0; min-width:0; overflow-wrap:anywhere; } .v2-task-configuration small { display:block; } .v2-task-configuration [role="alert"] { padding:12px; border:1px solid var(--v2-border); border-radius:8px; } .v2-task-configuration summary { cursor:pointer; } .v2-task-configuration code { font-size:11px; } +@media (max-width: 520px) { + .v2-task-configuration header { flex-wrap:wrap; } + .v2-task-configuration dl > div { grid-template-columns:minmax(0, 1fr); gap:4px; } +} + diff --git a/web/src/v2/components/thread-context.css b/web/src/v2/components/thread-context.css index 553762854..b64079bad 100644 --- a/web/src/v2/components/thread-context.css +++ b/web/src/v2/components/thread-context.css @@ -34,4 +34,4 @@ .v2-context-diagnostics-list p, .v2-context-notice p { margin:8px 0 0; } .v2-context-correction label { display:block; margin-bottom:7px; } .v2-context-correction textarea { box-sizing:border-box; width:100%; resize:vertical; min-height:110px; padding:10px 12px; border:1px solid var(--v2-border); border-radius:8px; background:var(--prayu-panel-strong); color:inherit; font:inherit; } -@media (max-width:600px) { .v2-thread-context { width:100vw; padding:14px 16px 28px; } .v2-thread-context > header { top:-14px; } .v2-thread-context dl { grid-template-columns:1fr; gap:2px; } .v2-thread-context dd { margin-bottom:8px; } } +@media (max-width:600px) { .v2-thread-context { box-sizing:border-box; width:100%; max-width:100vw; padding:14px 16px 28px; } .v2-thread-context > header { top:-14px; } .v2-thread-context dl { grid-template-columns:1fr; gap:2px; } .v2-thread-context dd { margin-bottom:8px; } } diff --git a/web/src/v2/styles.css b/web/src/v2/styles.css index 067ed9cdd..c8a41bffc 100644 --- a/web/src/v2/styles.css +++ b/web/src/v2/styles.css @@ -574,7 +574,8 @@ height: 27px; padding: 0 10px; } -.v2-thread-group > header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.v2-thread-group > header svg { flex-shrink: 0; } +.v2-thread-group > header span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-thread-row-shell { border-radius: 10px; min-width: 0; position: relative; } .v2-thread-row-shell.is-selected { background: var(--v2-control-hover); } .v2-thread-row-shell:hover:not(.is-selected) { background: color-mix(in srgb, var(--v2-control-hover) 70%, transparent); } @@ -590,7 +591,7 @@ text-align: left; width: 100%; } -.v2-thread-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.v2-thread-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-thread-state { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; color: var(--v2-muted); font-size: 10px; white-space: nowrap; } .v2-thread-state i { background: currentColor; border-radius: 50%; height: 6px; width: 6px; } .v2-thread-state.state-running { color: var(--v2-accent); } @@ -1435,10 +1436,10 @@ .v2-mcp-input a { color: var(--v2-ink); text-decoration: underline; text-underline-offset: 3px; } .v2-mcp-input button:disabled { opacity: .45; } -.v2-new-conversation-body { align-items: center; display: flex; justify-content: center; min-height: 0; } -.v2-new-copy { margin-top: 30px; max-width: 490px; text-align: center; } -.v2-new-copy h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin: 18px 0 8px; } -.v2-new-copy p { color: var(--v2-muted); line-height: 1.6; margin: 0; } +.v2-new-conversation-body { align-items: center; display: flex; justify-content: center; min-height: 0; padding: 0 16px; } +.v2-new-copy { box-sizing: border-box; margin-top: 30px; max-width: 490px; text-align: center; width: 100%; } +.v2-new-copy h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin: 18px 0 8px; overflow-wrap: anywhere; } +.v2-new-copy p { color: var(--v2-muted); line-height: 1.6; margin: 0; overflow-wrap: anywhere; } .v2-orb { display: inline-grid; filter: drop-shadow(0 9px 18px var(--prayu-shadow)); height: 48px; place-items: center; position: relative; width: 48px; } .v2-orb i { background: radial-gradient(circle at 28% 27%, var(--prayu-primary-bg) 0 20%, var(--prayu-primary-hover) 55%, var(--prayu-muted) 100%); border: 1px solid var(--prayu-glass-highlight); border-radius: 47% 53% 48% 52%; inset: 2px; position: absolute; transform: rotate(18deg); } .v2-orb i:last-child { filter: blur(9px); inset: 7px; opacity: .45; transform: rotate(-28deg); }