From 7b2324ecfb42136f6dc7f4456cccc923313bcfd1 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 6 Apr 2026 19:46:36 +0200
Subject: [PATCH] fix(ui): unify strip padding and bump person bar inputs to
 h-12

Align person bar, filter controls, and hint bar side padding to
px-4 sm:px-6 lg:px-8, matching the standard layout of all other
overview pages. Override person bar inputs from compact h-9 to h-12
for better touch targets in the results state.

Refs: #179

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/routes/briefwechsel/CorrespondenzFilterControls.svelte  | 2 +-
 frontend/src/routes/briefwechsel/CorrespondenzPersonBar.svelte  | 2 +-
 frontend/src/routes/briefwechsel/SinglePersonHintBar.svelte     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/routes/briefwechsel/CorrespondenzFilterControls.svelte b/frontend/src/routes/briefwechsel/CorrespondenzFilterControls.svelte
index 78313cda..5d686ffa 100644
--- a/frontend/src/routes/briefwechsel/CorrespondenzFilterControls.svelte
+++ b/frontend/src/routes/briefwechsel/CorrespondenzFilterControls.svelte
@@ -28,7 +28,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
 
 <div
 	data-testid="conv-filter-controls"
-	class="flex items-center gap-[10px] border-b border-line bg-muted px-4 py-[5px] transition-opacity sm:px-[18px]"
+	class="flex items-center gap-[10px] border-b border-line bg-muted px-4 py-[5px] transition-opacity sm:px-6 lg:px-8"
 	class:opacity-40={!senderId}
 	class:pointer-events-none={!senderId}
 	aria-disabled={!senderId}
diff --git a/frontend/src/routes/briefwechsel/CorrespondenzPersonBar.svelte b/frontend/src/routes/briefwechsel/CorrespondenzPersonBar.svelte
index 02edbead..a73d4eb5 100644
--- a/frontend/src/routes/briefwechsel/CorrespondenzPersonBar.svelte
+++ b/frontend/src/routes/briefwechsel/CorrespondenzPersonBar.svelte
@@ -55,7 +55,7 @@ function handleSuggestionSelect(id: string) {
 
 <div
 	data-testid="conv-person-bar"
-	class="flex items-end gap-[9px] border-b border-line bg-surface px-4 py-[9px] sm:px-[18px]"
+	class="flex items-end gap-[9px] border-b border-line bg-surface px-4 py-[9px] sm:px-6 lg:px-8 [&_input]:h-12"
 >
 	<!-- Person A -->
 	<div class="min-w-0 flex-1">
diff --git a/frontend/src/routes/briefwechsel/SinglePersonHintBar.svelte b/frontend/src/routes/briefwechsel/SinglePersonHintBar.svelte
index 034e0284..b2a45162 100644
--- a/frontend/src/routes/briefwechsel/SinglePersonHintBar.svelte
+++ b/frontend/src/routes/briefwechsel/SinglePersonHintBar.svelte
@@ -19,7 +19,7 @@ let toYear = $derived(toDate ? toDate.substring(0, 4) : '');
 </script>
 
 <div
-	class="flex items-center gap-[5px] border-b border-accent bg-accent-bg px-[18px] py-[6px] text-xs text-ink"
+	class="flex items-center gap-[5px] border-b border-accent bg-accent-bg px-4 py-[6px] text-xs text-ink sm:px-6 lg:px-8"
 >
 	<svg
 		xmlns="http://www.w3.org/2000/svg"