From bf54ba507d32d8d09dd3453dc04020d415ad4318 Mon Sep 17 00:00:00 2001 From: Dustin <204417361+Koraji95-coder@users.noreply.github.com> Date: Sun, 24 May 2026 03:46:48 -0500 Subject: [PATCH] fix(composer): consolidate chip-wrap flex rules per Copilot review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Copilot review on #2826 raised three points: 1. Five identical `flex: 0 0 auto` declarations across the chip-wrap selectors (profile / ws / reasoning / toolsets / model). The codebase already uses grouped selectors for shared rules — e.g. `.composer-left > .composer-model-wrap, .composer-left > .composer-reasoning-wrap, .composer-left > .composer-toolsets-wrap{display:none!important;}` at line 1817. Consolidated this PR's change to match. 2. `min-width: 0` is a no-op once `flex-shrink: 0` is set. Dropped it from all five wraps rather than leaving dead style. 3. CHANGELOG text said the overlap affected "profile / workspace / model / context-usage" chips, but `context-usage` is the separate `.ctx-indicator-wrap` ring, not `.composer-reasoning-wrap`. Rewrote the line to say "profile / workspace / model / reasoning" to match the actual class names and what the user sees. No behavior change vs the previous commit on this PR — same selectors, same final flex value. Just less duplication. --- CHANGELOG.md | 2 +- static/style.css | 17 ++++++++++++----- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index daaabc1c..845a1a61 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,7 @@ ### 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. +- **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 / reasoning chips to visually overlap. Switched to `flex:0 0 auto` for all five via a single grouped selector (no-op `min-width:0` dropped). Each chip now 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) diff --git a/static/style.css b/static/style.css index d5804df3..0f1354b9 100644 --- a/static/style.css +++ b/static/style.css @@ -1377,7 +1377,16 @@ .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 0 auto;min-width:0;} + /* Composer footer chip wraps share position:relative + flex:0 0 auto so + they keep their natural width and let .composer-left handle overflow + via horizontal scroll. flex-shrink:0 here is what fixes #2740 (chips + were compressing past their content and visually overlapping). Each + wrap declares its own display / gap below as needed. */ + .composer-profile-wrap, + .composer-ws-wrap, + .composer-reasoning-wrap, + .composer-toolsets-wrap, + .composer-model-wrap{position:relative;flex:0 0 auto;} .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 +1395,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 0 auto;min-width:0;display:flex;align-items:center;gap:4px;} + .composer-ws-wrap{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 +1410,6 @@ .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 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 +1422,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 0 auto;min-width:0;display:none;} + .composer-toolsets-wrap{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 +1443,6 @@ .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 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);}