From 513a7290b0f011a77ba200d53d8fd21613887714 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 20 Mar 2026 18:32:37 +0100
Subject: [PATCH] fix(conversations): keep swap button in DOM to prevent grid
 column width shift

The swap button was conditionally removed from the DOM with {#if}, which
caused the receiver input to collapse into the narrow auto column of the
grid-cols-[1fr_auto_1fr] layout on desktop when no persons were selected.

The button is now always rendered. On desktop it becomes invisible
(visibility:hidden) when no persons are selected, preserving the middle
column width so both 1fr columns stay equal. On mobile it remains hidden
(display:none) via the hidden class so no empty gap appears between the
stacked inputs.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/routes/conversations/+page.svelte     | 53 ++++++++++---------
 .../routes/conversations/page.svelte.spec.ts  |  7 +--
 2 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/frontend/src/routes/conversations/+page.svelte b/frontend/src/routes/conversations/+page.svelte
index 9cb882f0..8467a3b2 100644
--- a/frontend/src/routes/conversations/+page.svelte
+++ b/frontend/src/routes/conversations/+page.svelte
@@ -91,32 +91,35 @@ const enrichedDocuments = $derived(
 				/>
 			</div>
 
-			<!-- Swap button — icon-only on desktop, full-width with text on mobile -->
-			{#if senderId && receiverId}
-				<div class="flex items-end">
-					<button
-						data-testid="conv-swap-btn"
-						onclick={swapPersons}
-						class="flex w-full items-center justify-center gap-2 border border-brand-sand px-3 py-2.5 text-xs font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white md:w-auto"
-						title={m.conv_swap_btn()}
+			<!-- Swap button — always rendered to hold grid column width on desktop.
+			     On mobile: hidden (display:none) when no persons selected so no gap appears.
+			     On desktop: invisible (visibility:hidden) when no persons so both 1fr columns stay equal. -->
+			<div class="{senderId && receiverId ? 'flex' : 'hidden md:flex'} items-end">
+				<button
+					data-testid="conv-swap-btn"
+					onclick={swapPersons}
+					class="flex w-full items-center justify-center gap-2 border border-brand-sand px-3 py-2.5 text-xs font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white md:w-auto {senderId &&
+					receiverId
+						? ''
+						: 'invisible'}"
+					title={m.conv_swap_btn()}
+				>
+					<svg
+						class="h-4 w-4 flex-shrink-0 md:rotate-90"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
 					>
-						<svg
-							class="h-4 w-4 flex-shrink-0 md:rotate-90"
-							fill="none"
-							stroke="currentColor"
-							viewBox="0 0 24 24"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4"
-							></path>
-						</svg>
-						<span class="md:hidden">{m.conv_swap_btn()}</span>
-					</button>
-				</div>
-			{/if}
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4"
+						></path>
+					</svg>
+					<span class="md:hidden">{m.conv_swap_btn()}</span>
+				</button>
+			</div>
 
 			<!-- Receiver -->
 			<div
diff --git a/frontend/src/routes/conversations/page.svelte.spec.ts b/frontend/src/routes/conversations/page.svelte.spec.ts
index 906a1dc4..c7cb41fc 100644
--- a/frontend/src/routes/conversations/page.svelte.spec.ts
+++ b/frontend/src/routes/conversations/page.svelte.spec.ts
@@ -51,9 +51,10 @@ describe('Conversations page – empty state', () => {
 		await expect.element(page.getByText(/Wählen Sie zwei Personen aus/i)).toBeInTheDocument();
 	});
 
-	it('does not show the swap button when no persons are selected', async () => {
+	it('hides the swap button when no persons are selected', async () => {
 		render(Page, { data: baseData });
-		await expect.element(page.getByTestId('conv-swap-btn')).not.toBeInTheDocument();
+		// Button is always in the DOM (holds grid column width on desktop) but made invisible
+		await expect.element(page.getByTestId('conv-swap-btn')).toHaveClass('invisible');
 	});
 
 	it('does not show the new document link when no persons are selected', async () => {
@@ -76,7 +77,7 @@ describe('Conversations page – no results', () => {
 describe('Conversations page – swap button', () => {
 	it('shows the swap button when both persons are selected', async () => {
 		render(Page, { data: withPersons });
-		await expect.element(page.getByTestId('conv-swap-btn')).toBeInTheDocument();
+		await expect.element(page.getByTestId('conv-swap-btn')).not.toHaveClass('invisible');
 	});
 
 	it('calls goto with swapped sender and receiver when clicked', async () => {