patrick/bullseye-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix habit cell morphing on focus in Chrome browsers

Browse Source 
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.
This commit is contained in:
Patrick Jaroszewski
2026-03-02 15:20:46 -05:00
parent f4c3a9e11d
commit e9bee860d7
1 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(app)/habits/CounterHabitButton.svelte
+3 -2
View File
@@ -142,9 +142,10 @@
class={cn( 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', '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', 'animate-in fade-in-5 duration-300',
'focus-visible:outline-none',
direction === 'end' ? 'slide-in-from-right-12' : 'slide-in-from-left-12', direction === 'end' ? 'slide-in-from-right-12' : 'slide-in-from-left-12',
checked checked
? 'bg-primary text-primary-foreground border border-primary hover:bg-primary/90' ? 'bg-primary text-primary-foreground border border-primary hover:bg-primary/90'
: 'bg-card border border-border text-foreground hover:bg-muted/50', : 'bg-card border border-border text-foreground hover:bg-muted/50',
isToday && !checked && 'ring-2 ring-ring bg-accent', isToday && !checked && 'ring-2 ring-ring bg-accent',
isFailed && !checked && 'bg-destructive/10 border-destructive/30', isFailed && !checked && 'bg-destructive/10 border-destructive/30',