fix(frontend): fix side panel X button click falling through to PDF toolbar

pointer-events-none and pointer-events-auto were both present as static
and conditional Tailwind classes simultaneously. CSS specificity meant
pointer-events-none always won, so clicks passed through to the
annotation toggle button behind the panel. Now pointer-events-none is
only applied when the panel is hidden (translated off-screen).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/components/AnnotationSidePanel.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+import CommentThread from './CommentThread.svelte';
+
+type Props = {
+	documentId: string;
+	activeAnnotationId: string | null;
+	activeAnnotationPage: number | null;
+	canComment: boolean;
+	currentUserId: string | null;
+	canAdmin: boolean;
+	onClose: () => void;
+};
+
+let {
+	documentId,
+	activeAnnotationId,
+	activeAnnotationPage,
+	canComment,
+	currentUserId,
+	canAdmin,
+	onClose
+}: Props = $props();
+
+const visible = $derived(activeAnnotationId !== null);
+</script>
+
+<div
+	class="absolute inset-y-0 right-0 z-10 flex w-80 flex-col border-l border-brand-sand bg-white shadow-[-4px_0_16px_rgba(0,0,0,0.08)] transition-transform duration-200 {visible
+		? 'translate-x-0'
+		: 'pointer-events-none translate-x-full'}"
+	data-testid="annotation-side-panel"
+>
+	<!-- Header -->
+	<div class="flex shrink-0 items-center justify-between border-b border-brand-sand px-4 py-3">
+		<span class="font-sans text-xs font-medium text-brand-navy">
+			{m.doc_panel_discussion_annotation_tab({ page: String(activeAnnotationPage ?? '?') })}
+		</span>
+		<button
+			onclick={onClose}
+			aria-label={m.comment_panel_close()}
+			class="rounded p-1 text-gray-400 transition-colors hover:bg-brand-sand/50 hover:text-brand-navy"
+		>
+			<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" />
+			</svg>
+		</button>
+	</div>
+
+	<!-- Comment thread -->
+	<div class="flex-1 overflow-y-auto p-4">
+		{#if activeAnnotationId}
+			{#key activeAnnotationId}
+				<CommentThread
+					documentId={documentId}
+					annotationId={activeAnnotationId}
+					canComment={canComment}
+					currentUserId={currentUserId}
+					canAdmin={canAdmin}
+					loadOnMount={true}
+				/>
+			{/key}
+		{/if}
+	</div>
+</div>

frontend/src/lib/components/DocumentBottomPanel.svelte

@@ -48,9 +48,6 @@ type Props = {
 	open: boolean;
 	height: number;
 	activeTab: Tab;
-	activeAnnotationId: string | null;
-	activeAnnotationPage: number | null;
-	onAnnotationCommentCountChange?: (annotationId: string, count: number) => void;
 };
 
 let {
@@ -61,24 +58,25 @@ let {
 	canAdmin,
 	open = $bindable(),
 	height = $bindable(),
-	activeTab = $bindable(),
-	activeAnnotationId,
-	activeAnnotationPage,
-	onAnnotationCommentCountChange
+	activeTab = $bindable()
 }: Props = $props();
 
 const MIN_HEIGHT = 52; // drag handle (8px) + tab bar (~44px)
-const DEFAULT_HEIGHT = 320;
 
 let isDragging = $state(false);
 let dragStartY = 0;
 let dragStartHeight = 0;
 
+function fullHeight() {
+	const topbar = document.querySelector('[data-topbar]');
+	return window.innerHeight - (topbar?.getBoundingClientRect().bottom ?? 0);
+}
+
 function openTab(tab: Tab) {
 	activeTab = tab;
 	if (!open) {
 		open = true;
-		if (height <= MIN_HEIGHT) height = DEFAULT_HEIGHT;
+		if (height <= MIN_HEIGHT) height = fullHeight();
 	}
 }
 
@@ -97,14 +95,14 @@ function onDragMove(e: PointerEvent) {
 	if (!isDragging) return;
 	const delta = dragStartY - e.clientY; // positive = dragging up = bigger panel
 	const newHeight = dragStartHeight + delta;
-	const maxHeight = Math.floor(window.innerHeight * 0.8);
+	const maxHeight = fullHeight();
 
 	if (newHeight <= MIN_HEIGHT + 20) {
 		// collapsed past threshold → close
 		open = false;
 	} else {
 		open = true;
-		height = Math.max(DEFAULT_HEIGHT / 4, Math.min(newHeight, maxHeight));
+		height = Math.max(80, Math.min(newHeight, maxHeight));
 	}
 }
 
@@ -183,13 +181,10 @@ const panelHeight = $derived(open ? height : MIN_HEIGHT);
 			{:else if activeTab === 'discussion'}
 				<PanelDiscussion
 					documentId={doc.id}
-					activeAnnotationId={activeAnnotationId}
-					activeAnnotationPage={activeAnnotationPage}
 					initialComments={comments}
 					canComment={canComment}
 					currentUserId={currentUserId}
 					canAdmin={canAdmin}
-					onAnnotationCommentCountChange={onAnnotationCommentCountChange}
 				/>
 			{:else if activeTab === 'history'}
 				<PanelHistory documentId={doc.id} />

frontend/src/lib/components/DocumentTopBar.svelte

@@ -59,6 +59,7 @@ const compactMeta = $derived.by(() => {
 
 <div
 	class="z-20 flex shrink-0 items-center justify-between border-b border-brand-sand bg-white px-6 py-3 shadow-sm"
+	data-topbar
 >
 	<!-- Left: back + title -->
 	<div class="flex min-w-0 items-center gap-4 overflow-hidden">
@@ -100,10 +101,16 @@ const compactMeta = $derived.by(() => {
 			<button
 				onclick={() => (annotateMode = !annotateMode)}
 				aria-label={annotateMode ? m.doc_panel_annotate_stop() : m.doc_panel_annotate()}
-				class="rounded px-3 py-1.5 font-sans text-xs font-medium transition {annotateMode
+				class="flex items-center gap-1.5 rounded px-3 py-1.5 font-sans text-xs font-medium transition {annotateMode
 					? 'bg-brand-navy text-white'
 					: 'border border-brand-navy text-brand-navy hover:bg-brand-navy hover:text-white'}"
 			>
+				<img
+					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
+					alt=""
+					aria-hidden="true"
+					class="h-4 w-4 {annotateMode ? 'invert' : ''}"
+				/>
 				{annotateMode ? m.doc_panel_annotate_stop() : m.doc_panel_annotate()}
 			</button>
 		{/if}

frontend/src/lib/components/PanelDiscussion.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-import { m } from '$lib/paraglide/messages.js';
 import CommentThread from './CommentThread.svelte';
 
 type CommentReply = {
@@ -23,107 +22,21 @@ type Comment = {
 
 type Props = {
 	documentId: string;
-	activeAnnotationId: string | null;
-	activeAnnotationPage: number | null;
 	initialComments: Comment[];
 	canComment: boolean;
 	currentUserId: string | null;
 	canAdmin: boolean;
-	onAnnotationCommentCountChange?: (annotationId: string, count: number) => void;
 };
 
-let {
-	documentId,
-	activeAnnotationId,
-	activeAnnotationPage,
-	initialComments,
-	canComment,
-	currentUserId,
-	canAdmin,
-	onAnnotationCommentCountChange
-}: Props = $props();
-
-// Sub-tab within the discussion panel: 'document' or 'annotation'
-type DiscussionTab = 'document' | 'annotation';
-let activeSubTab = $state<DiscussionTab>('document');
-
-// Track document-level comment count for badge.
-// CommentThread calls onCountChange immediately on mount with the accurate total.
-let docCommentCount = $state(0);
-
-// When an annotation becomes active, switch to the annotation sub-tab automatically.
-$effect(() => {
-	if (activeAnnotationId) {
-		activeSubTab = 'annotation';
-	} else {
-		activeSubTab = 'document';
-	}
-});
-
-function selectDocumentTab() {
-	activeSubTab = 'document';
-}
-
-function selectAnnotationTab() {
-	activeSubTab = 'annotation';
-}
+let { documentId, initialComments, canComment, currentUserId, canAdmin }: Props = $props();
 </script>
 
-<div class="flex h-full flex-col">
-	<!-- Sub-tab bar (only shown when annotation is active) -->
-	{#if activeAnnotationId}
-		<div class="flex shrink-0 border-b border-brand-sand/70 bg-gray-50 px-4">
-			<button
-				onclick={selectDocumentTab}
-				class="mr-1 px-3 py-2 font-sans text-xs font-medium transition-colors {activeSubTab === 'document'
-					? 'border-b-2 border-brand-navy text-brand-navy'
-					: 'text-gray-400 hover:text-brand-navy'}"
-			>
-				{m.doc_panel_tab_discussion()}
-				{#if docCommentCount > 0}
-					<span
-						class="ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-brand-mint px-1 font-mono text-[10px] text-brand-navy"
-					>
-						{docCommentCount}
-					</span>
-				{/if}
-			</button>
-			<button
-				onclick={selectAnnotationTab}
-				class="px-3 py-2 font-sans text-xs font-medium transition-colors {activeSubTab === 'annotation'
-					? 'border-b-2 border-brand-navy text-brand-navy'
-					: 'text-gray-400 hover:text-brand-navy'}"
-			>
-				{m.doc_panel_discussion_annotation_tab({ page: String(activeAnnotationPage ?? '?') })}
-			</button>
-		</div>
-	{/if}
-
-	<!-- Content area -->
-	<div class="flex-1 overflow-y-auto p-6">
-		{#if !activeAnnotationId || activeSubTab === 'document'}
-			<!-- Document-level thread -->
-			<CommentThread
-				documentId={documentId}
-				initialComments={initialComments}
-				canComment={canComment}
-				currentUserId={currentUserId}
-				canAdmin={canAdmin}
-				onCountChange={(count) => (docCommentCount = count)}
-			/>
-		{:else}
-			<!-- Annotation-level thread -->
-			{#key activeAnnotationId}
-				<CommentThread
-					documentId={documentId}
-					annotationId={activeAnnotationId}
-					canComment={canComment}
-					currentUserId={currentUserId}
-					canAdmin={canAdmin}
-					loadOnMount={true}
-					onCountChange={(count) => onAnnotationCommentCountChange?.(activeAnnotationId, count)}
-				/>
-			{/key}
-		{/if}
-	</div>
+<div class="flex-1 overflow-y-auto p-6">
+	<CommentThread
+		documentId={documentId}
+		initialComments={initialComments}
+		canComment={canComment}
+		currentUserId={currentUserId}
+		canAdmin={canAdmin}
+	/>
 </div>

frontend/src/lib/components/PanelHistory.svelte

@@ -333,8 +333,79 @@ $effect(() => {
 					{m.history_compare_apply()}
 				</button>
 			</div>
+
+			<!-- Diff panel for compare mode -->
+			{#if diffLoading}
+				<p class="font-sans text-xs text-gray-400">{m.history_loading()}</p>
+			{:else if noDiff}
+				<div
+					data-testid="history-diff"
+					class="rounded-sm border border-brand-sand bg-white p-4 font-serif text-sm text-gray-400 italic"
+				>
+					{m.history_diff_no_changes()}
+				</div>
+			{:else if diffEntries.length > 0}
+				<div
+					data-testid="history-diff"
+					class="space-y-4 rounded-sm border border-brand-sand bg-white p-4"
+				>
+					{#each diffEntries as entry (entry.field)}
+						<div>
+							<span
+								class="mb-1.5 block font-sans text-[10px] font-bold tracking-wide text-gray-400 uppercase"
+								>{entry.label}</span
+							>
+							{#if entry.kind === 'text'}
+								<p class="font-serif text-sm leading-relaxed">
+									{#each entry.parts as part, partIdx (partIdx)}
+										{#if part.added}
+											<span class="bg-green-50 text-green-700">{part.value}</span>
+										{:else if part.removed}
+											<span class="bg-red-50 text-red-600 line-through">{part.value}</span>
+										{:else}
+											<span>{part.value}</span>
+										{/if}
+									{/each}
+								</p>
+							{:else if entry.kind === 'scalar'}
+								<div class="flex items-center gap-2 font-serif text-sm">
+									<span class="text-red-600 line-through">{entry.oldVal || '—'}</span>
+									<svg
+										class="h-3 w-3 flex-shrink-0 text-gray-400"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										aria-hidden="true"
+									>
+										<path
+											fill-rule="evenodd"
+											d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+											clip-rule="evenodd"
+										/>
+									</svg>
+									<span class="text-green-700">{entry.newVal || '—'}</span>
+								</div>
+							{:else if entry.kind === 'relation'}
+								<div class="flex flex-wrap gap-1.5">
+									{#each entry.removed as item (item)}
+										<span
+											class="rounded bg-red-50 px-1.5 py-0.5 font-sans text-[11px] text-red-600 line-through"
+											>{item}</span
+										>
+									{/each}
+									{#each entry.added as item (item)}
+										<span
+											class="rounded bg-green-50 px-1.5 py-0.5 font-sans text-[11px] text-green-700"
+											>{item}</span
+										>
+									{/each}
+								</div>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			{/if}
 		{:else}
-			<!-- Version list -->
+			<!-- Version list with inline diff below each selected item -->
 			<ul class="divide-y divide-brand-sand">
 				{#each versions as v, i (v.id)}
 					<li>
@@ -367,80 +438,82 @@ $effect(() => {
 								</div>
 							{/if}
 						</button>
+
+						<!-- Diff shown inline below the selected version -->
+						{#if selectedVersionId === v.id}
+							{#if diffLoading}
+								<p class="pb-3 pl-2 font-sans text-xs text-gray-400">{m.history_loading()}</p>
+							{:else if noDiff}
+								<div
+									data-testid="history-diff"
+									class="mb-2 rounded-sm border border-brand-sand bg-white p-4 font-serif text-sm text-gray-400 italic"
+								>
+									{m.history_diff_no_changes()}
+								</div>
+							{:else if diffEntries.length > 0}
+								<div
+									data-testid="history-diff"
+									class="mb-2 space-y-4 rounded-sm border border-brand-sand bg-white p-4"
+								>
+									{#each diffEntries as entry (entry.field)}
+										<div>
+											<span
+												class="mb-1.5 block font-sans text-[10px] font-bold tracking-wide text-gray-400 uppercase"
+												>{entry.label}</span
+											>
+											{#if entry.kind === 'text'}
+												<p class="font-serif text-sm leading-relaxed">
+													{#each entry.parts as part, partIdx (partIdx)}
+														{#if part.added}
+															<span class="bg-green-50 text-green-700">{part.value}</span>
+														{:else if part.removed}
+															<span class="bg-red-50 text-red-600 line-through">{part.value}</span>
+														{:else}
+															<span>{part.value}</span>
+														{/if}
+													{/each}
+												</p>
+											{:else if entry.kind === 'scalar'}
+												<div class="flex items-center gap-2 font-serif text-sm">
+													<span class="text-red-600 line-through">{entry.oldVal || '—'}</span>
+													<svg
+														class="h-3 w-3 flex-shrink-0 text-gray-400"
+														viewBox="0 0 20 20"
+														fill="currentColor"
+														aria-hidden="true"
+													>
+														<path
+															fill-rule="evenodd"
+															d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+															clip-rule="evenodd"
+														/>
+													</svg>
+													<span class="text-green-700">{entry.newVal || '—'}</span>
+												</div>
+											{:else if entry.kind === 'relation'}
+												<div class="flex flex-wrap gap-1.5">
+													{#each entry.removed as item (item)}
+														<span
+															class="rounded bg-red-50 px-1.5 py-0.5 font-sans text-[11px] text-red-600 line-through"
+															>{item}</span
+														>
+													{/each}
+													{#each entry.added as item (item)}
+														<span
+															class="rounded bg-green-50 px-1.5 py-0.5 font-sans text-[11px] text-green-700"
+															>{item}</span
+														>
+													{/each}
+												</div>
+											{/if}
+										</div>
+									{/each}
+								</div>
+							{/if}
+						{/if}
 					</li>
 				{/each}
 			</ul>
 		{/if}
-
-		<!-- Diff panel -->
-		{#if diffLoading}
-			<p class="font-sans text-xs text-gray-400">{m.history_loading()}</p>
-		{:else if noDiff}
-			<div
-				data-testid="history-diff"
-				class="rounded-sm border border-brand-sand bg-white p-4 font-serif text-sm text-gray-400 italic"
-			>
-				{m.history_diff_no_changes()}
-			</div>
-		{:else if diffEntries.length > 0}
-			<div
-				data-testid="history-diff"
-				class="space-y-4 rounded-sm border border-brand-sand bg-white p-4"
-			>
-				{#each diffEntries as entry (entry.field)}
-					<div>
-						<span
-							class="mb-1.5 block font-sans text-[10px] font-bold tracking-wide text-gray-400 uppercase"
-							>{entry.label}</span
-						>
-						{#if entry.kind === 'text'}
-							<p class="font-serif text-sm leading-relaxed">
-								{#each entry.parts as part, partIdx (partIdx)}
-									{#if part.added}
-										<span class="bg-green-50 text-green-700">{part.value}</span>
-									{:else if part.removed}
-										<span class="bg-red-50 text-red-600 line-through">{part.value}</span>
-									{:else}
-										<span>{part.value}</span>
-									{/if}
-								{/each}
-							</p>
-						{:else if entry.kind === 'scalar'}
-							<div class="flex items-center gap-2 font-serif text-sm">
-								<span class="text-red-600 line-through">{entry.oldVal || '—'}</span>
-								<svg
-									class="h-3 w-3 flex-shrink-0 text-gray-400"
-									viewBox="0 0 20 20"
-									fill="currentColor"
-									aria-hidden="true"
-								>
-									<path
-										fill-rule="evenodd"
-										d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-										clip-rule="evenodd"
-									/>
-								</svg>
-								<span class="text-green-700">{entry.newVal || '—'}</span>
-							</div>
-						{:else if entry.kind === 'relation'}
-							<div class="flex flex-wrap gap-1.5">
-								{#each entry.removed as item (item)}
-									<span
-										class="rounded bg-red-50 px-1.5 py-0.5 font-sans text-[11px] text-red-600 line-through"
-										>{item}</span
-									>
-								{/each}
-								{#each entry.added as item (item)}
-									<span
-										class="rounded bg-green-50 px-1.5 py-0.5 font-sans text-[11px] text-green-700"
-										>{item}</span
-									>
-								{/each}
-							</div>
-						{/if}
-					</div>
-				{/each}
-			</div>
-		{/if}
 	{/if}
 </div>

frontend/src/lib/components/PdfViewer.svelte

@@ -403,54 +403,45 @@ function zoomOut() {
 					title="Farbe wählen"
 				/>
 			{/if}
-		</div>
-
-		<!-- Annotation visibility toggle (shown when annotations exist) -->
-		{#if annotations.length > 0}
-			<button
-				onclick={() => (showAnnotations = !showAnnotations)}
-				aria-label={showAnnotations ? m.pdf_annotations_hide() : m.pdf_annotations_show()}
-				title={showAnnotations ? m.pdf_annotations_hide() : m.pdf_annotations_show()}
-				class="rounded p-1 transition {showAnnotations
+			<!-- Annotation visibility toggle (shown when annotations exist) -->
+			{#if annotations.length > 0}
+				<button
+					onclick={() => (showAnnotations = !showAnnotations)}
+					aria-label={showAnnotations ? m.pdf_annotations_hide() : m.pdf_annotations_show()}
+					class="flex items-center gap-1.5 rounded px-2 py-1 font-sans text-xs transition {showAnnotations
 						? 'text-gray-300 hover:bg-white/10'
 						: 'bg-white/10 text-brand-mint'}"
-			>
-				{#if showAnnotations}
+				>
 					<svg
-						class="h-4 w-4"
+						class="h-3.5 w-3.5 shrink-0"
 						viewBox="0 0 24 24"
 						fill="none"
 						stroke="currentColor"
 						stroke-width="2"
 					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-						/>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-						/>
+						{#if showAnnotations}
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+							/>
+						{:else}
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+							/>
+						{/if}
 					</svg>
-				{:else}
-					<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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-						/>
-					</svg>
-				{/if}
-			</button>
-		{/if}
+					{showAnnotations ? m.pdf_annotations_hide() : m.pdf_annotations_show()}
+				</button>
+			{/if}
+		</div>
 
 		<!-- PDF canvas area -->
 		<div class="relative flex-1 overflow-auto">

frontend/src/routes/documents/[id]/+page.svelte

@@ -3,6 +3,7 @@ import { onMount } from 'svelte';
 import DocumentTopBar from '$lib/components/DocumentTopBar.svelte';
 import DocumentViewer from '$lib/components/DocumentViewer.svelte';
 import DocumentBottomPanel from '$lib/components/DocumentBottomPanel.svelte';
+import AnnotationSidePanel from '$lib/components/AnnotationSidePanel.svelte';
 
 type Tab = 'metadata' | 'transcription' | 'discussion' | 'history';
 
@@ -58,44 +59,37 @@ let annotateMode = $state(false);
 let activeAnnotationId = $state<string | null>(null);
 let activeAnnotationPage = $state<number | null>(null);
 
-// When an annotation is clicked, open the Diskussion tab.
+// Close the panel when entering annotate mode so the PDF is fully visible.
 $effect(() => {
-	if (activeAnnotationId) {
-		activeTab = 'discussion';
-		panelOpen = true;
-	}
+	if (annotateMode) panelOpen = false;
 });
 
 // ── Bottom panel state ────────────────────────────────────────────────────────
 
-const LS_KEY_OPEN = 'doc-panel-open';
 const LS_KEY_HEIGHT = 'doc-panel-height';
 const LS_KEY_TAB = 'doc-panel-tab';
 
 let panelOpen = $state(false);
-let panelHeight = $state(320);
+let panelHeight = $state(0); // set to full height on mount
+let navHeight = $state(0);
 let activeTab = $state<Tab>('metadata');
 let localStorageRestored = $state(false);
 
 onMount(() => {
-	const savedOpen = localStorage.getItem(LS_KEY_OPEN);
+	navHeight = document.querySelector('header')?.getBoundingClientRect().height ?? 0;
+
 	const savedHeight = localStorage.getItem(LS_KEY_HEIGHT);
 	const savedTab = localStorage.getItem(LS_KEY_TAB);
 
 	if (savedTab && ['metadata', 'transcription', 'discussion', 'history'].includes(savedTab)) {
 		activeTab = savedTab as Tab;
 	}
+	const topbar = document.querySelector('[data-topbar]');
+	panelHeight = window.innerHeight - navHeight - (topbar?.getBoundingClientRect().height ?? 0);
 	if (savedHeight) {
 		const h = parseInt(savedHeight, 10);
 		if (!isNaN(h) && h >= 80) panelHeight = h;
 	}
-	if (savedOpen !== null) {
-		panelOpen = savedOpen === 'true';
-	} else if (!doc.filePath) {
-		// No previous state and no file → open to Metadaten by default
-		panelOpen = true;
-		activeTab = 'metadata';
-	}
 
 	localStorageRestored = true;
 
@@ -116,7 +110,6 @@ onMount(() => {
 // Persist panel state whenever it changes (after initial restore).
 $effect(() => {
 	if (!localStorageRestored) return;
-	localStorage.setItem(LS_KEY_OPEN, String(panelOpen));
 	localStorage.setItem(LS_KEY_HEIGHT, String(panelHeight));
 	localStorage.setItem(LS_KEY_TAB, activeTab);
 });
@@ -126,7 +119,11 @@ $effect(() => {
 	<title>{doc.title || doc.originalFilename || 'Dokument'}</title>
 </svelte:head>
 
-<div class="fixed inset-0 z-50 flex flex-col overflow-hidden bg-white" data-hydrated>
+<div
+	class="fixed right-0 bottom-0 left-0 z-40 flex flex-col overflow-hidden bg-white"
+	style="top: {navHeight}px"
+	data-hydrated
+>
 	<DocumentTopBar
 		doc={doc}
 		canWrite={data.canWrite ?? false}
@@ -148,6 +145,18 @@ $effect(() => {
 				activeAnnotationId = id;
 			}}
 		/>
+		<AnnotationSidePanel
+			documentId={doc.id}
+			activeAnnotationId={activeAnnotationId}
+			activeAnnotationPage={activeAnnotationPage}
+			canComment={canComment}
+			currentUserId={currentUserId}
+			canAdmin={canAdmin}
+			onClose={() => {
+				activeAnnotationId = null;
+				activeAnnotationPage = null;
+			}}
+		/>
 	</div>
 
 	<DocumentBottomPanel
@@ -159,7 +168,5 @@ $effect(() => {
 		bind:open={panelOpen}
 		bind:height={panelHeight}
 		bind:activeTab={activeTab}
-		activeAnnotationId={activeAnnotationId}
-		activeAnnotationPage={activeAnnotationPage}
 	/>
 </div>