style(shared-ui): drop hover-lift transforms from pills and chips

The whole pill family used a translateY(-1px / -2px) on :hover that
made the chrome jitter every time the cursor crossed anything —
especially noticeable in the TagStrip, PillNav, and the user-menu
bar where pills sit close together and a 1-2px jump reads as
twitching rather than polish.

Removed the hover transform (and the matching :active reset on
the base Pill) from:

- Pill.svelte — base primitive, covers PillNav + every bar pill
- AppDrawer.svelte — .glass-pill in the app switcher
- PillTagSelector.svelte — .glass-pill in the quick-input tag selector
- PillTimeRangeSelector.svelte — .glass-pill in the calendar range picker
- UserMenuPanel.svelte — .chip hover in the popover variant

Background, border, and shadow hover states are kept — only the
vertical displacement is gone.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-15 15:32:18 +02:00
parent 39c85ccdcc
commit fffd3eb75a
5 changed files with 0 additions and 9 deletions

View file

@ -312,7 +312,6 @@
.glass-pill:hover {
background: hsl(var(--color-surface-hover));
border-color: hsl(var(--color-border-strong, var(--color-border)));
transform: translateY(-2px);
box-shadow:
0 6px 12px hsl(0 0% 0% / 0.08),
0 2px 4px hsl(0 0% 0% / 0.05);

View file

@ -164,11 +164,6 @@
.pill:hover:not(:disabled) {
background: hsl(var(--color-surface-hover, var(--color-card)));
border-color: hsl(var(--color-border-strong, var(--color-border)));
transform: translateY(-1px);
}
.pill:active:not(:disabled) {
transform: translateY(0);
}
.pill:disabled {

View file

@ -213,7 +213,6 @@
.glass-pill:hover {
background: hsl(var(--color-surface-hover));
border-color: hsl(var(--color-border-strong, var(--color-border)));
transform: translateY(-2px);
box-shadow:
0 6px 12px hsl(0 0% 0% / 0.08),
0 2px 4px hsl(0 0% 0% / 0.05);

View file

@ -265,7 +265,6 @@
.glass-pill:hover {
background: hsl(var(--color-surface-hover));
transform: translateY(-1px);
box-shadow:
0 6px 12px hsl(0 0% 0% / 0.08),
0 2px 4px hsl(0 0% 0% / 0.05);

View file

@ -563,7 +563,6 @@
.chip:hover:not(:disabled) {
background: hsl(var(--color-surface-hover, var(--color-muted)));
transform: translateY(-1px);
}
.chip:disabled {