From 822a2fac3a106ec706748f26f161eeb4d643b6bc Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 6 Apr 2026 19:53:03 +0200
Subject: [PATCH] fix(ui): add inner padding to strip components

Add px-3 to person bar, filter controls, and hint bar so inputs
don't sit flush against the container edge.

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 0740c06c..e47c1c25 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 py-[5px] transition-opacity"
+	class="flex items-center gap-[10px] border-b border-line bg-muted px-3 py-[5px] transition-opacity"
 	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 be61117c..5b3e1d24 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 py-[9px] [&_input]:h-12"
+	class="flex items-end gap-[9px] border-b border-line bg-surface px-3 py-[9px] [&_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 31734da0..00fe9a59 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 py-[6px] text-xs text-ink"
+	class="flex items-center gap-[5px] border-b border-accent bg-accent-bg px-3 py-[6px] text-xs text-ink"
 >
 	<svg
 		xmlns="http://www.w3.org/2000/svg"