Skip to content

webviews: the Options chip truncates only when its row is full (chip-fixed-width, agent-pane-no-capsules base reds) #23068

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
teamleaderleo wants to merge 2 commits into from
Closed

webviews: the Options chip truncates only when its row is full (chip-fixed-width, agent-pane-no-capsules base reds) #23068

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8edc758
webviews: the Options chip truncates only when its row is full, and t…
teamleaderleo Oct 21, 2026
6204e92
webviews: the composer row takes its steps before the Options chip gi…
teamleaderleo Oct 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion webviews/src/agent-session/acpmux/AgentOptionsMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,9 @@ export function AgentOptionsMenu({
aria-haspopup="menu"
data-menu="options"
>
<span className="acpmux-options-text">{face}</span>
<span className="acpmux-options-text" data-fit-natural>
{face}
</span>
<ChevronIcon />
</MenuButton>
<MenuPopup side="top" align="start" className="acpmux-access-menu acpmux-options-menu">
Expand Down
14 changes: 11 additions & 3 deletions webviews/src/agent-session/acpmux/composerControls.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,18 +249,26 @@
.acpmux-chip-pending { pointer-events: none; }
.acpmux-chip-pending .acpmux-picker-button:hover { background: none; }
/* The Options chip (AgentOptionsMenu): the harness's other settings, a quiet pill like the access
chip, its face one option's name and choice or "Options". */
chip, its face one option's name and choice or "Options". It gives way only when its row is
full: the row takes its steps first (composerRowFit.ts counts the face's whole width), then the
chip shrinks, down to the New Tab model chip's floor, and its face ellipsizes; never at a fixed
width while the row has room (chip-fixed-width.test.ts). */
:is(.acpmux-composer-bar, .nt-pickers) .acpmux-options .acpmux-picker-button {
height: 28px;
min-width: 0;
max-width: 100%;
gap: 4px;
padding: 0 6px 0 8px;
border-radius: 999px;
color: var(--agent-muted);
}
:is(.acpmux-composer-bar, .nt-pickers) .acpmux-chips > .acpmux-options { flex: 0 1 auto; min-width: 56px; }
.acpmux-options .acpmux-picker-button[aria-expanded="true"],
.acpmux-options .acpmux-picker-button:hover { color: var(--agent-text); }
.acpmux-options-text {
max-width: 180px;
.acpmux-options-text,
.acpmux-composer-bar .acpmux-options .acpmux-options-text {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Expand Down
4 changes: 4 additions & 0 deletions webviews/src/agent-session/acpmux/composerRowFit.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,10 @@ function widthAt(element: HTMLElement, then: Forms): number {
const taken = part.getBoundingClientRect().width + (parent ? px(getComputedStyle(parent).columnGap) : 0);
width += before ? -taken : taken;
}
// A face that ellipsizes when the row is full (`data-fit-natural`, the Options chip) counts at its
// whole width, so the row takes its steps before that face gives up any text.
for (const face of element.querySelectorAll<HTMLElement>("[data-fit-natural]"))
width += Math.max(0, face.scrollWidth - face.clientWidth);
return width;
}

Expand Down
6 changes: 4 additions & 2 deletions webviews/test/agent-pane-no-capsules.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,9 @@ if (!built && process.env.CI) throw new Error(`agent-pane-no-capsules: ${page} i
if (!built) console.warn("agent-pane-no-capsules: skipping (run scripts/cmux-next/build-agent-pane-web.sh)");

/** Capsules by nature: a toggle's track, a slider's track and fill, a progress bar, drawn lines,
* and the composer's model, effort and access chips, whose hover, focus and open background is the
* Claude app's soft pill (#22107; composer-chip-plain-rest and composer-chip-press check it). The
* and the composer's model, effort, access and Options chips, whose hover, focus and open background
* is the Claude app's soft pill (#22107; composer-chip-plain-rest and composer-chip-press check it).
* The Options chip (AgentOptionsMenu) sits in the same row and takes the access chip's shape. The
* Cards New Tab template (u2851, from the user's scrawl of Aside's New Tab page) is a pill design
* on purpose: its field, its Search | Ask switch (track, thumb and buttons) and its selected Chats
* tab are round (newtab/screen.css). The other templates keep small-radius rects. */
Expand All @@ -33,6 +34,7 @@ const SHAPES = new Set([
":is(.acpmux-composer-bar,.nt-pickers) .acpmux-model .acpmux-picker-button",
":is(.acpmux-composer-bar,.nt-pickers) .acpmux-effort .acpmux-picker-button",
":is(.acpmux-composer-bar,.nt-pickers) .acpmux-access .acpmux-picker-button",
":is(.acpmux-composer-bar,.nt-pickers) .acpmux-options .acpmux-picker-button",
".acpmux-model .acpmux-picker-button",
".acpmux-effort .acpmux-picker-button",
".acpmux-access .acpmux-picker-button",
Expand Down