From 527d174e9c18a16893b0b74772ba0f90686b3351 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 31 Mar 2026 16:42:11 +0200
Subject: [PATCH] fix(focus-rings): remove broken [&_input]:focus selectors and
 fix error state focus-visible
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Strip malformed [[&_input]:focus:*] class fragments from PersonTypeahead
  wrapper divs in both ConversationFilterBar components — PersonTypeahead
  manages its own focus ring; parent selectors were redundant and broken
- Fix WhoWhenSection error state: focus:ring-red-500 → focus-visible:ring-red-500
  so invalid date field ring no longer fires on mouse click

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/document/WhoWhenSection.svelte    | 2 +-
 .../src/routes/conversations/ConversationFilterBar.svelte     | 4 ++--
 .../src/routes/korrespondenz/ConversationFilterBar.svelte     | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/document/WhoWhenSection.svelte b/frontend/src/lib/components/document/WhoWhenSection.svelte
index 18696a1c..d86a6743 100644
--- a/frontend/src/lib/components/document/WhoWhenSection.svelte
+++ b/frontend/src/lib/components/document/WhoWhenSection.svelte
@@ -71,7 +71,7 @@ $effect(() => {
 				placeholder={m.form_placeholder_date()}
 				maxlength="10"
 				class="block w-full rounded border border-line p-2 text-sm shadow-sm
-                       {dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'}"
+                       {dateInvalid ? 'border-red-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500' : 'focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'}"
 				aria-describedby={dateInvalid ? 'date-error' : undefined}
 			/>
 			<input type="hidden" name="documentDate" value={dateIso} />
diff --git a/frontend/src/routes/conversations/ConversationFilterBar.svelte b/frontend/src/routes/conversations/ConversationFilterBar.svelte
index 2c67890d..da7b33c1 100644
--- a/frontend/src/routes/conversations/ConversationFilterBar.svelte
+++ b/frontend/src/routes/conversations/ConversationFilterBar.svelte
@@ -31,7 +31,7 @@ let {
 	<div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6">
 		<!-- Sender -->
 		<div
-			class="[[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-2 [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-focus-ring [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus:outline-none relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+			class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
 		>
 			<PersonTypeahead
 				name="senderId"
@@ -73,7 +73,7 @@ let {
 
 		<!-- Receiver -->
 		<div
-			class="[[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-2 [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-focus-ring [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus:outline-none relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+			class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
 		>
 			<PersonTypeahead
 				name="receiverId"
diff --git a/frontend/src/routes/korrespondenz/ConversationFilterBar.svelte b/frontend/src/routes/korrespondenz/ConversationFilterBar.svelte
index 2c67890d..da7b33c1 100644
--- a/frontend/src/routes/korrespondenz/ConversationFilterBar.svelte
+++ b/frontend/src/routes/korrespondenz/ConversationFilterBar.svelte
@@ -31,7 +31,7 @@ let {
 	<div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6">
 		<!-- Sender -->
 		<div
-			class="[[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-2 [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-focus-ring [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus:outline-none relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+			class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
 		>
 			<PersonTypeahead
 				name="senderId"
@@ -73,7 +73,7 @@ let {
 
 		<!-- Receiver -->
 		<div
-			class="[[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-2 [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-focus-ring [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus:outline-none relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+			class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
 		>
 			<PersonTypeahead
 				name="receiverId"