fix(ui): constrain results state to max-w-7xl like other overview pages

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>
This commit is contained in:
Marcel
2026-04-06 19:49:30 +02:00
parent 7b2324ecfb
commit d5e3de5fe6
4 changed files with 23 additions and 23 deletions

View File

@@ -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}

View File

@@ -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}

View File

@@ -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">

View File

@@ -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"