From fffd3eb75a2651505affca6bb2cbc38d032e2812 Mon Sep 17 00:00:00 2001 From: Till JS Date: Wed, 15 Apr 2026 15:32:18 +0200 Subject: [PATCH] style(shared-ui): drop hover-lift transforms from pills and chips MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- packages/shared-ui/src/navigation/AppDrawer.svelte | 1 - packages/shared-ui/src/navigation/Pill.svelte | 5 ----- packages/shared-ui/src/navigation/PillTagSelector.svelte | 1 - .../shared-ui/src/navigation/PillTimeRangeSelector.svelte | 1 - packages/shared-ui/src/navigation/UserMenuPanel.svelte | 1 - 5 files changed, 9 deletions(-) diff --git a/packages/shared-ui/src/navigation/AppDrawer.svelte b/packages/shared-ui/src/navigation/AppDrawer.svelte index 0203b1d61..adcda9dcd 100644 --- a/packages/shared-ui/src/navigation/AppDrawer.svelte +++ b/packages/shared-ui/src/navigation/AppDrawer.svelte @@ -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); diff --git a/packages/shared-ui/src/navigation/Pill.svelte b/packages/shared-ui/src/navigation/Pill.svelte index bf3b8d118..9d924c083 100644 --- a/packages/shared-ui/src/navigation/Pill.svelte +++ b/packages/shared-ui/src/navigation/Pill.svelte @@ -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 { diff --git a/packages/shared-ui/src/navigation/PillTagSelector.svelte b/packages/shared-ui/src/navigation/PillTagSelector.svelte index 1cee223d4..c70acc9c3 100644 --- a/packages/shared-ui/src/navigation/PillTagSelector.svelte +++ b/packages/shared-ui/src/navigation/PillTagSelector.svelte @@ -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); diff --git a/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte b/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte index ea738d8f0..2aff4f947 100644 --- a/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte +++ b/packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte @@ -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); diff --git a/packages/shared-ui/src/navigation/UserMenuPanel.svelte b/packages/shared-ui/src/navigation/UserMenuPanel.svelte index a1e442a86..8986f6df4 100644 --- a/packages/shared-ui/src/navigation/UserMenuPanel.svelte +++ b/packages/shared-ui/src/navigation/UserMenuPanel.svelte @@ -563,7 +563,6 @@ .chip:hover:not(:disabled) { background: hsl(var(--color-surface-hover, var(--color-muted))); - transform: translateY(-1px); } .chip:disabled {