Fix card-selection border weight, transition sync, and Adorn tag grey peek#5111
Closed
lukemelia wants to merge 4 commits into
Closed
Fix card-selection border weight, transition sync, and Adorn tag grey peek#5111lukemelia wants to merge 4 commits into
lukemelia wants to merge 4 commits into
Conversation
… peek Three Adorn selection-overlay polish items from design review: CS-11329: in the card chooser, a selected item showed only the thin 1px button border — the intended teal ring never applied because it relied on AdornContext's :deep stroke rule, which the catalog item didn't pick up. Define the ring directly on `.catalog-item.adorn.selected` (4px highlight, darker on hover) so it stays full-weight whether or not the item is hovered. CS-11330: that ring faded in ~0.2s after the selection tag/chip (which render instantly), so the border lagged the tag. Set `transition: none` on the selected ring so the two appear together. CS-11331: the Adorn label tab cast a grey `drop-shadow` filter that peeked out past its clipped/rounded corners. Remove it. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
When the type-label tab flips below a card (no room above), it overlapped the card's bottom edge by 2px, leaving it sitting one pixel too high over the edge. Reduce the overlap to 1px so the flag's top edge still tucks under the bottom outline stroke and reads as attached. Addresses the vertical-alignment point of CS-11331; verified live (overlap 2px → 1px). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The previous fix put `transition: none` only on `.catalog-item.adorn.selected`, not on its `:hover` variant. But a card is normally hovered at the moment it's clicked to select, so the `:hover` rule governs the ring's first paint — and it fell back to the base `box-shadow 0.2s`, so the ring animated in ~0.2s after the (instant) selection chip. Apply `transition: none` to the hover variant as well. Verified live with a real pointer: select-while-hovered now paints the ring in one frame. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The styling class on this component predated its rename to `ItemButton`; `catalog-item` also mis-implied it's catalog-only when it also renders search results. Rename the scoped class (and the `.catalog-item` test assertions) to match the component. The separate `data-test-card-catalog-item` attributes are left as-is. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
lukemelia
changed the base branch from
cs-11325-card-chooser-selection-trigger-reconsider-adorn-pill-vs
to
main
This was referenced Jun 4, 2026
Contributor
Author
|
[Claude Code 🤖] Superseded — split into 4 focused PRs (each rebased onto current
Closing this bundled draft; reopen if needed. |
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
1 participant
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.
Adorn selection-overlay polish from Burcu's review of #5083. Diagnosed and verified live in the running app via DevTools computed styles + geometry.
CS-11329 — selection border too thin (fully addressed)
In the card chooser, a selected item showed only the thin 1px button border. The intended teal ring was supposed to come from
AdornContext's:deep(.adorn-stroke.selected)rule, but the catalog item didn't pick it up (computedbox-shadowon a selected item wasrgba(0,0,0,0) 0 0 0 0). Fix: define the ring directly on.catalog-item.adorn.selected— a 4px--boxel-highlightring, darkening to--boxel-highlight-hoveron hover — so it stays full-weight whether or not the item is hovered. Verified: nowrgb(0,255,186) 0 0 0 4px. (Operator-mode overlays already rendered a correct 4px ring, so this is scoped to the chooser/searchitem-button.)CS-11330 — border lags the tag (fully addressed)
The ring faded in over
box-shadow 0.2swhile the selection tag/chip render instantly, so the border appeared ~0.2s after the tag. Fix:transition: noneon the selected ring so the two appear together. (In operator mode both were already instant — no desync there.)CS-11331 — Adorn tag polish (2 of 3 points; issue stays open)
drop-shadowfilter that bled past its clipped/rounded corners; removed it (verifiedfilter: none).Base branch
Targets
cs-11325-…(PR #5100) because the Adorn overlay/tag code these touch was reworked on that stack and isn't onmainyet — branching offmainwould patch stale code. Will rebase ontomainonce the stack lands.Testing
🤖 Generated with Claude Code