From 82988bebc2779e915bd1e4fec4e9eef4b218dc77 Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <cabassut.frederic@gmail.com>
Date: Mon, 9 Mar 2026 21:52:59 +0100
Subject: [PATCH] fix: remove focus outline from note cards during drag

Add outline-none to both the NoteCard article and the NoteGrid
wrapper div to prevent browser focus outlines when dragging.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/NoteCard.svelte | 2 +-
 src/lib/components/NoteGrid.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/NoteCard.svelte b/src/lib/components/NoteCard.svelte
index dab4a7b..a67eee9 100644
--- a/src/lib/components/NoteCard.svelte
+++ b/src/lib/components/NoteCard.svelte
@@ -77,7 +77,7 @@
 
 <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
 <article
-	class="group relative cursor-pointer rounded-sm border border-[var(--border-subtle)] p-4 transition-all hover:border-[var(--primary)] shadow-[var(--card-shadow)] hover:shadow-[var(--card-shadow-hover)] {fullHeight ? 'h-full' : ''}"
+	class="group relative cursor-pointer rounded-sm border border-[var(--border-subtle)] p-4 outline-none transition-all hover:border-[var(--primary)] shadow-[var(--card-shadow)] hover:shadow-[var(--card-shadow-hover)] {fullHeight ? 'h-full' : ''}"
 	style={cardStyle}
 	onclick={() => onEdit(note)}
 	onkeydown={(e) => e.key === 'Enter' && onEdit(note)}
diff --git a/src/lib/components/NoteGrid.svelte b/src/lib/components/NoteGrid.svelte
index 666ec23..6c1ea02 100644
--- a/src/lib/components/NoteGrid.svelte
+++ b/src/lib/components/NoteGrid.svelte
@@ -48,7 +48,7 @@
 			onfinalize={handleFinalize}
 		>
 			{#each localItems as note (note.id)}
-				<div class="h-full" animate:flip={{ duration: flipDurationMs }}>
+				<div class="h-full outline-none" animate:flip={{ duration: flipDurationMs }}>
 					<NoteCard {note} {onEdit} fullHeight />
 				</div>
 			{/each}