From e9bee860d7d47a3e1b64b64851b43f4545e8ff08 Mon Sep 17 00:00:00 2001 From: patrick Date: Mon, 2 Mar 2026 15:20:46 -0500 Subject: [PATCH] Fix habit cell morphing on focus in Chrome browsers Prevent visual glitch where habit cells would shrink and borders would morph during NumberFlow animations when interacting via keyboard (shift key). Added focus-visible:outline-none to suppress global outline style that was causing layout shifts in Chrome's rendering engine. --- src/routes/(app)/habits/CounterHabitButton.svelte | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/routes/(app)/habits/CounterHabitButton.svelte b/src/routes/(app)/habits/CounterHabitButton.svelte index 1d82548..ded4759 100644 --- a/src/routes/(app)/habits/CounterHabitButton.svelte +++ b/src/routes/(app)/habits/CounterHabitButton.svelte @@ -142,9 +142,10 @@ class={cn( 'z-10 flex h-12 w-full shrink-0 items-center justify-center shadow-sm select-none hover:cursor-pointer transition-all duration-200', 'animate-in fade-in-5 duration-300', + 'focus-visible:outline-none', direction === 'end' ? 'slide-in-from-right-12' : 'slide-in-from-left-12', - checked - ? 'bg-primary text-primary-foreground border border-primary hover:bg-primary/90' + checked + ? 'bg-primary text-primary-foreground border border-primary hover:bg-primary/90' : 'bg-card border border-border text-foreground hover:bg-muted/50', isToday && !checked && 'ring-2 ring-ring bg-accent', isFailed && !checked && 'bg-destructive/10 border-destructive/30',