Skip to content

Remove the Adorn label grey peek and sit it flush below the card (CS-11331) #5120

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

Merged
lukemelia merged 3 commits into from
Jun 5, 2026
Merged

Remove the Adorn label grey peek and sit it flush below the card (CS-11331) #5120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
03d3620
Nudge the below-card Adorn label down 1px so it doesn't ride high
lukemelia Jun 4, 2026
7d7b880
Remove the grey drop-shadow peek on the Adorn label tab (CS-11331)
lukemelia Jun 4, 2026
7893dec
Sit the below-card Adorn label flush with the card's bottom edge
lukemelia Jun 5, 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
1 change: 0 additions & 1 deletion packages/host/app/components/adorn/adorn-label.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ const AdornLabel: TemplateOnlyComponent<AdornLabelSignature> = <template>
border-radius: 0.3125rem 0 0 0.3125rem;
clip-path: polygon(0 0, calc(100% - 0.8125rem) 0, 100% 100%, 0 100%);
z-index: 1;
filter: drop-shadow(0 0.3125rem 0.5rem rgba(0, 0, 0, 0.2));
}
/* Mirrored polygon when the label flips below the card so the
slope still points toward the card edge. */
Expand Down
10 changes: 5 additions & 5 deletions packages/host/app/modifiers/position-adorn-label.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,12 +116,12 @@ export function makePositionAdornLabel(
anchorLeftX = cardRect.left - 4;
label.style.maxWidth = 'max-content';
}
// When flipped below, overlap the card by 2px so the flag's wide
// top edge tucks under the bottom outline stroke and reads as
// attached. (Anchoring it 2px below the card instead left a
// visible gap under the stroke.)
// When flipped below, sit the flag's top edge flush with the card's
// bottom edge — no overlap into the card (any overlap reads as the tag
// riding too high over the edge), and no gap (its z-index keeps it
// above the selection outline stroke, so it still reads as attached).
let anchorTopY =
side === 'top' ? cardRect.top - labelHeight - 2 : cardRect.bottom - 2;
side === 'top' ? cardRect.top - labelHeight - 2 : cardRect.bottom;

// The label's anchor positions (anchorLeftX, anchorTopY) are in
// viewport coordinates. With `position: absolute`, the inline
Expand Down
Loading