From a1017d02b1c64958bd6cd083ee7160dccfb7eadd Mon Sep 17 00:00:00 2001 From: Dustin <204417361+Koraji95-coder@users.noreply.github.com> Date: Sun, 24 May 2026 03:29:06 -0500 Subject: [PATCH] fix(composer): stop chip wraps from compressing past their content (#2740) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The composer-footer chip wraps (`.composer-profile-wrap`, `.composer-ws-wrap`, `.composer-model-wrap`, `.composer-reasoning-wrap`, `.composer-toolsets-wrap`) had `flex:0 1 auto` plus `min-width:0`, which let them shrink past their content's natural width when the composer narrowed. With several chips visible at once, this presents as the profile chip and workspace chip running into each other, or the model chip and the context-usage ring visually overlapping — the symptom #2740 reports. Flip to `flex:0 0 auto` on all five wraps. Each chip now keeps its natural width, and the existing `overflow-x:auto` on `.composer-left` takes over: when the chips together exceed the container width, the strip scrolls horizontally instead of letting individual chips compress and collide. Default-width layout is unchanged — this only affects the overflow regime that was producing the bug. Container queries below at 700px and 520px already strip labels and chevrons, then collapse chips to 44x44px icons; this fix improves the intermediate range and the `> 700px` container case that occasionally narrows when the right workspace panel is open. Verification: tested at 1100, 900, 700, 600, 520, 400 viewport widths with multiple right-panel states. At every width the chips render without overlap; at sub-520px container the existing icon-only mode takes over as before. No JS changes, no template changes — single CSS attribute on five existing selectors. Closes #2740. --- CHANGELOG.md | 4 ++++ static/style.css | 10 +++++----- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b8eaaf34..daaabc1c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,10 @@ ## [Unreleased] +### Fixed + +- **Composer footer chip overlap at narrow widths** (#2740) — chip wraps (`.composer-profile-wrap`, `.composer-ws-wrap`, `.composer-model-wrap`, `.composer-reasoning-wrap`, `.composer-toolsets-wrap`) had `flex:0 1 auto`+`min-width:0` so they would compress past their content's natural width when the composer narrowed, causing the profile / workspace / model / context-usage chips to visually overlap. Switched to `flex:0 0 auto` so each chip keeps its natural width and the existing `overflow-x:auto` on `.composer-left` handles overflow via horizontal scroll. Default-width layout unchanged; only affects the overflow regime. + ## [v0.51.124] — 2026-05-24 — Release CV (stage-batch6 — 3-PR Windows-only stack — agent paths / docs / port hardening) ### Added diff --git a/static/style.css b/static/style.css index d010f4e1..d5804df3 100644 --- a/static/style.css +++ b/static/style.css @@ -1377,7 +1377,7 @@ .composer-left{display:flex;align-items:center;gap:4px;min-width:0;flex:1;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;} .composer-left::-webkit-scrollbar{display:none;} .composer-divider{width:1px;height:16px;background:var(--border);margin:0 3px;flex-shrink:0;} - .composer-profile-wrap{position:relative;flex:0 1 auto;min-width:0;} + .composer-profile-wrap{position:relative;flex:0 0 auto;min-width:0;} .composer-profile-chip{display:inline-flex;align-items:center;gap:8px;max-width:180px;padding:8px 10px 8px 12px;border-radius:999px;border:1px solid transparent;background-color:transparent;font-weight:500;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s;} .composer-profile-chip:hover{background-color:var(--hover-bg);} .composer-profile-chip.active{background:var(--accent-bg);border-color:var(--accent-bg-strong);} @@ -1386,7 +1386,7 @@ .composer-profile-chip.switching .composer-profile-icon{position:relative;} .composer-profile-icon,.composer-profile-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;} .composer-profile-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} - .composer-ws-wrap{position:relative;flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:4px;} + .composer-ws-wrap{position:relative;flex:0 0 auto;min-width:0;display:flex;align-items:center;gap:4px;} .composer-workspace-group{display:inline-flex;align-items:stretch;max-width:284px;border-radius:999px;overflow:hidden;background-color:transparent;border:1px solid var(--border2);transition:background-color .15s,border-color .15s;} .composer-workspace-group:hover{background-color:var(--hover-bg);} .composer-workspace-group:hover{border-color:var(--border2);} @@ -1401,7 +1401,7 @@ .composer-workspace-chip.active{color:var(--text);background:var(--accent-bg);} .composer-workspace-icon,.composer-workspace-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;} .composer-workspace-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} - .composer-reasoning-wrap{position:relative;flex:0 1 auto;min-width:0;} + .composer-reasoning-wrap{position:relative;flex:0 0 auto;min-width:0;} .composer-reasoning-chip{display:inline-flex;align-items:center;gap:8px;max-width:180px;padding:8px 10px 8px 12px;border-radius:999px;border:1px solid transparent;background-color:transparent;color:var(--muted);font-weight:500;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s;} .composer-reasoning-chip.inactive{opacity:.78;} .composer-reasoning-chip:hover{color:var(--text);background-color:var(--hover-bg);} @@ -1414,7 +1414,7 @@ .reasoning-option:hover{background:rgba(255,255,255,.07);} .reasoning-option.selected{background:var(--accent-bg);} /* Toolsets chip — session-level toolset override (#493) */ - .composer-toolsets-wrap{position:relative;flex:0 1 auto;min-width:0;display:none;} + .composer-toolsets-wrap{position:relative;flex:0 0 auto;min-width:0;display:none;} .composer-toolsets-chip{display:inline-flex;align-items:center;gap:8px;max-width:180px;padding:8px 10px 8px 12px;border-radius:999px;border:1px solid transparent;background-color:transparent;color:var(--muted);font-weight:500;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s;} .composer-toolsets-chip:hover{color:var(--text);background-color:var(--hover-bg);} .composer-toolsets-chip.active{color:var(--text);background:var(--accent-bg);border-color:var(--accent-bg);} @@ -1435,7 +1435,7 @@ .toolsets-apply-btn:hover{opacity:.9;} .toolsets-clear-btn{background:transparent;color:var(--muted);border:1px solid var(--border2);} .toolsets-clear-btn:hover{background:var(--hover-bg);color:var(--text);} - .composer-model-wrap{position:relative;flex:0 1 auto;min-width:0;} + .composer-model-wrap{position:relative;flex:0 0 auto;min-width:0;} .composer-model-chip{display:inline-flex;align-items:center;gap:8px;max-width:280px;padding:8px 10px 8px 12px;border-radius:999px;border:1px solid transparent;background-color:transparent;color:var(--muted);font-weight:500;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s;} .composer-model-chip:hover{color:var(--text);background-color:var(--hover-bg);} .composer-model-chip.active{color:var(--text);background:var(--accent-bg);border-color:var(--accent-bg);}