From e1c09ddc7f9152d88b35978b66db0abc27c3516a Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 27 Mar 2026 16:33:47 +0100
Subject: [PATCH] fix(#99): make document detail tab bar scrollable on narrow
 screens

Wrap tabs in overflow-x-auto container with hidden scrollbar so all 4
German labels ("Transkription" etc.) are reachable at 320px. Close
button stays pinned outside the scroll area, always visible.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../lib/components/DocumentBottomPanel.svelte | 48 ++++++++++---------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/frontend/src/lib/components/DocumentBottomPanel.svelte b/frontend/src/lib/components/DocumentBottomPanel.svelte
index a2aba5b8..aec4191e 100644
--- a/frontend/src/lib/components/DocumentBottomPanel.svelte
+++ b/frontend/src/lib/components/DocumentBottomPanel.svelte
@@ -127,35 +127,37 @@ function handleCountChange(count: number) {
 	</div>
 
 	<!-- Tab bar -->
-	<div class="flex shrink-0 items-center border-b border-line bg-surface px-4">
-		{#each tabs as tab (tab.id)}
-			<button
-				onclick={() => openTab(tab.id)}
-				class="mr-1 px-3 py-2.5 font-sans text-xs font-medium transition-colors {activeTab === tab.id && open
-					? 'border-b-2 border-primary text-ink'
-					: 'text-ink-3 hover:text-ink'}"
-				aria-pressed={activeTab === tab.id && open}
-			>
-				{tab.label()}
-				{#if tab.id === 'discussion'}
-					<span
-						data-testid="discussion-count-badge"
-						class="ml-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 font-sans text-[10px] font-bold text-primary-fg"
-						>{discussionCount}</span
-					>
-				{/if}
-			</button>
-		{/each}
-
-		<!-- spacer -->
-		<div class="flex-1"></div>
+	<div class="flex shrink-0 items-center border-b border-line bg-surface">
+		<!-- Scrollable tabs area — hides scrollbar visually -->
+		<div
+			class="flex flex-1 items-center overflow-x-auto px-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+		>
+			{#each tabs as tab (tab.id)}
+				<button
+					onclick={() => openTab(tab.id)}
+					class="mr-1 shrink-0 px-3 py-2.5 font-sans text-xs font-medium transition-colors {activeTab === tab.id && open
+						? 'border-b-2 border-primary text-ink'
+						: 'text-ink-3 hover:text-ink'}"
+					aria-pressed={activeTab === tab.id && open}
+				>
+					{tab.label()}
+					{#if tab.id === 'discussion'}
+						<span
+							data-testid="discussion-count-badge"
+							class="ml-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 font-sans text-[10px] font-bold text-primary-fg"
+							>{discussionCount}</span
+						>
+					{/if}
+				</button>
+			{/each}
+		</div>
 
 		{#if open}
 			<button
 				onclick={closePanel}
 				data-testid="panel-close-btn"
 				aria-label="Panel schließen"
-				class="rounded p-1.5 text-ink-3 transition-colors hover:bg-muted hover:text-ink"
+				class="mr-2 shrink-0 rounded p-1.5 text-ink-3 transition-colors hover:bg-muted hover:text-ink"
 			>
 				<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />