gooneyryan/hermes-webui
1
0
Fork 0
mirror of https://github.com/nesquena/hermes-webui.git synced 2026-05-26 03:30:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(composer): stop chip wraps from compressing past their content (#2740)

Browse Source 
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.
This commit is contained in:
Dustin
2026-05-24 03:29:06 -05:00
parent 66de2367a9
commit a1017d02b1
2 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+4
View File
@@ -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
static/style.css
+5 -5
View File
@@ -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);}