From d5e3de5fe67eb458d5c632380a6f3e653bb9db6a Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 6 Apr 2026 19:49:30 +0200
Subject: [PATCH] fix(ui): constrain results state to max-w-7xl like other
 overview pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move strips inside the max-w-7xl container so person bar, filter
controls, and hint bar are no longer full-bleed. Remove duplicate
side padding from strip components — the parent container handles it.

Refs: #179

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

diff --git a/frontend/src/routes/briefwechsel/+page.svelte b/frontend/src/routes/briefwechsel/+page.svelte
index a280e90b..53f095f7 100644
--- a/frontend/src/routes/briefwechsel/+page.svelte
+++ b/frontend/src/routes/briefwechsel/+page.svelte
@@ -99,7 +99,7 @@ function selectPerson(id: string) {
 	</div>
 {:else}
 	<!-- Results state: strips + content -->
-	<div class="-mt-6">
+	<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
 		<CorrespondenzPersonBar
 			bind:senderId={senderId}
 			bind:receiverId={receiverId}
@@ -127,25 +127,25 @@ function selectPerson(id: string) {
 				sortDir={sortDir}
 			/>
 		{/if}
-	</div>
 
-	<div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
-		{#if data.documents.length === 0}
-			<div
-				class="flex flex-col items-center justify-center rounded-sm border border-line bg-muted py-24 text-center shadow-sm"
-			>
-				<p class="font-serif text-ink">{m.conv_no_results_heading()}</p>
-				<p class="mt-2 text-sm text-ink-3">{m.conv_no_results_text()}</p>
-			</div>
-		{:else}
-			<ConversationTimeline
-				documents={data.documents}
-				senderId={senderId}
-				receiverId={receiverId}
-				canWrite={data.canWrite}
-				senderName={senderName}
-				receiverName={receiverName}
-			/>
-		{/if}
+		<div class="py-4">
+			{#if data.documents.length === 0}
+				<div
+					class="flex flex-col items-center justify-center rounded-sm border border-line bg-muted py-24 text-center shadow-sm"
+				>
+					<p class="font-serif text-ink">{m.conv_no_results_heading()}</p>
+					<p class="mt-2 text-sm text-ink-3">{m.conv_no_results_text()}</p>
+				</div>
+			{:else}
+				<ConversationTimeline
+					documents={data.documents}
+					senderId={senderId}
+					receiverId={receiverId}
+					canWrite={data.canWrite}
+					senderName={senderName}
+					receiverName={receiverName}
+				/>
+			{/if}
+		</div>
 	</div>
 {/if}
diff --git a/frontend/src/routes/briefwechsel/CorrespondenzFilterControls.svelte b/frontend/src/routes/briefwechsel/CorrespondenzFilterControls.svelte
index 5d686ffa..0740c06c 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-6 lg:px-8"
+	class="flex items-center gap-[10px] border-b border-line bg-muted 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 a73d4eb5..be61117c 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-6 lg:px-8 [&_input]:h-12"
+	class="flex items-end gap-[9px] border-b border-line bg-surface 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 b2a45162..31734da0 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-4 py-[6px] text-xs text-ink sm:px-6 lg:px-8"
+	class="flex items-center gap-[5px] border-b border-accent bg-accent-bg py-[6px] text-xs text-ink"
 >
 	<svg
 		xmlns="http://www.w3.org/2000/svg"