fix(ui): reveal button group chrome only on interaction - #387
Open
astyfx wants to merge 1 commit into
Open
Conversation
ButtonGroup carried a permanent hairline outline, which made the advisor and worker mode toggles read as form fields dropped into a composer toolbar of otherwise bare ghost buttons — the only bordered controls in the row. Move the outline and the segment divider to interaction states (hover / focus-within / an open menu), so at rest a group weighs exactly what the single-segment ghost button beside it weighs. The border box is kept laid out via border-transparent, matching the shared Button base, so revealing it cannot shift the toolbar. The revealed weight goes to border/70 rather than the /55 this carried while permanent: an outline that only exists during interaction can afford to be decisive, and /70 is what keeps it legible in the lowest-contrast built-in theme (solarized-light, where border sits 0.055 OKLab lightness from card — /45 measured 0.025, below the threshold where a hairline reads at all). No new theme tokens; no consumer changes. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
astyfx
requested review from
heath-s and
png-1105
and removed request for
a team
August 24, 2026 01:25
|
| Commit | Scanned at | New | Resolved | Net |
|---|---|---|---|---|
f409441 < |
2026-08-24 01:25 UTC | 0 | 0 | 0 |
Last scanned: f409441 · 2026-08-24 01:25 UTC
|
| Commit | Scanned at | New | Resolved | Net |
|---|---|---|---|---|
f409441 < |
2026-08-24 01:25 UTC | 0 | 0 | 0 |
Last scanned: f409441 · 2026-08-24 01:25 UTC
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
ButtonGroup(added in #383) carried a permanent hairline outline. In the composer toolbar — a row of otherwise bare ghost buttons — that made the advisor and worker mode toggles the only bordered controls in the row, so they read as form fields rather than as peers of the buttons beside them.The outline is now an interaction state, not the control's identity: at rest a group weighs exactly what the single-segment ghost button next to it weighs, and hovering, keyboard-focusing, or opening its menu draws the halves together.
Key changes
Single file:
src/components/ui/button-group.tsx(+45/−8, mostly rationale comments). No consumer changes.hover/focus-within/has-[[aria-expanded=true]], wired through a namedgroup/button-groupso the divider tracks the same three conditions as the border.border-transparentrather than no border, matching the sharedButtonbase — the box is always laid out, so revealing it cannot shift the toolbar.border/70, up from the/55this carried while permanent. An outline that exists only during interaction can afford to be decisive; the earlier weight was heavy because it was always on, not because it was dark.Why
/70specifically/45was the first candidate and it fails. Computingborder-on-cardOKLab lightness delta across all 16 built-in themes:border/45solarized-lightborder/70solarized-lightsolarized-lightputsborderonly 0.055 fromcard, so any further transparency erases it. This is not something eyeballing the default light/dark pair would have caught.Verification
bun run typecheckcleanreliability-gates,doc-paths,max-lines-ratchet,switch-exhaustivenessall passtests/prompt-input-advisor-mode.test.ts+tests/advisor.test.ts— 101 pass / 0 failhas-[]composition under Tailwind v4 was the part worth doubting):overflow-hiddendoes not clip itbordertokenNotes
Deliberately no group background behind the reveal. A
muted/25wash measured under 0.02 lightness against both composer surfaces — imperceptible — while each segment's own hover tint is what actually reads. The enclosing border is what says "one object".🤖 Generated with Claude Code