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:
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user