marcel/familienarchiv
1
0
Fork 0
Code Issues 126 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/routes/briefwechsel/+page.svelte
View File

@@ -99,7 +99,7 @@ function selectPerson(id: string) {
</div> </div>
{:else} {:else}
<!-- Results state: strips + content --> <!-- Results state: strips + content -->
<div class="-mt-6"> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<CorrespondenzPersonBar <CorrespondenzPersonBar
bind:senderId={senderId} bind:senderId={senderId}
bind:receiverId={receiverId} bind:receiverId={receiverId}
@@ -127,25 +127,25 @@ function selectPerson(id: string) {
sortDir={sortDir} sortDir={sortDir}
/> />
{/if} {/if}
</div>
<div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8"> <div class="py-4">
{#if data.documents.length === 0} {#if data.documents.length === 0}
<div <div
class="flex flex-col items-center justify-center rounded-sm border border-line bg-muted py-24 text-center shadow-sm" 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="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> <p class="mt-2 text-sm text-ink-3">{m.conv_no_results_text()}</p>
</div> </div>
{:else} {:else}
<ConversationTimeline <ConversationTimeline
documents={data.documents} documents={data.documents}
senderId={senderId} senderId={senderId}
receiverId={receiverId} receiverId={receiverId}
canWrite={data.canWrite} canWrite={data.canWrite}
senderName={senderName} senderName={senderName}
receiverName={receiverName} receiverName={receiverName}
/> />
{/if} {/if}
</div>
</div> </div>
{/if} {/if}

2
frontend/src/routes/briefwechsel/CorrespondenzFilterControls.svelte
View File

@@ -28,7 +28,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
<div <div
data-testid="conv-filter-controls" 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:opacity-40={!senderId}
class:pointer-events-none={!senderId} class:pointer-events-none={!senderId}
aria-disabled={!senderId} aria-disabled={!senderId}

2
frontend/src/routes/briefwechsel/CorrespondenzPersonBar.svelte
View File

@@ -55,7 +55,7 @@ function handleSuggestionSelect(id: string) {
<div <div
data-testid="conv-person-bar" 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 --> <!-- Person A -->
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">

2
frontend/src/routes/briefwechsel/SinglePersonHintBar.svelte
View File

@@ -19,7 +19,7 @@ let toYear = $derived(toDate ? toDate.substring(0, 4) : '');
</script> </script>
<div <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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"