From 03060236100bffce290b24f075fb3d4c796d8136 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 29 May 2026 19:00:58 +0200
Subject: [PATCH] fix(stammbaum): 44x44 touch targets for panel + affordance
 icon buttons (#692)

Enlarge the centre-on-person, panel-close, and affordance-dismiss icon buttons
to 44x44 hit areas (WCAG 2.5.8, UX review) while keeping the small glyphs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/lib/person/genealogy/StammbaumAffordance.svelte | 2 +-
 frontend/src/lib/person/genealogy/StammbaumSidePanel.svelte  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/person/genealogy/StammbaumAffordance.svelte b/frontend/src/lib/person/genealogy/StammbaumAffordance.svelte
index 044b7e1f..1c38ea1a 100644
--- a/frontend/src/lib/person/genealogy/StammbaumAffordance.svelte
+++ b/frontend/src/lib/person/genealogy/StammbaumAffordance.svelte
@@ -72,7 +72,7 @@ $effect(() => {
 				type="button"
 				onclick={hide}
 				aria-label={m.stammbaum_affordance_dismiss()}
-				class="rounded-sm p-0.5 text-ink-3 transition hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none"
+				class="-my-2 inline-flex h-11 w-11 items-center justify-center rounded-sm text-ink-3 transition hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none"
 			>
 				<svg
 					class="h-3.5 w-3.5"
diff --git a/frontend/src/lib/person/genealogy/StammbaumSidePanel.svelte b/frontend/src/lib/person/genealogy/StammbaumSidePanel.svelte
index f0c9f429..c3a34a50 100644
--- a/frontend/src/lib/person/genealogy/StammbaumSidePanel.svelte
+++ b/frontend/src/lib/person/genealogy/StammbaumSidePanel.svelte
@@ -103,7 +103,7 @@ const topDerived = $derived(
 					type="button"
 					onclick={onCentre}
 					aria-label={m.stammbaum_centre_on_person()}
-					class="rounded-sm p-1 text-ink-3 transition hover:bg-muted hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none"
+					class="inline-flex h-11 w-11 items-center justify-center rounded-sm text-ink-3 transition hover:bg-muted hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none"
 				>
 					<svg
 						class="h-4 w-4"
@@ -122,7 +122,7 @@ const topDerived = $derived(
 				type="button"
 				onclick={onClose}
 				aria-label={m.comp_dismiss()}
-				class="rounded-sm p-1 text-ink-3 transition hover:bg-muted hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none"
+				class="inline-flex h-11 w-11 items-center justify-center rounded-sm text-ink-3 transition hover:bg-muted hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none"
 			>
 				<svg
 					class="h-4 w-4"