frontend/src/lib/components/PdfViewer.svelte

@@ -217,6 +217,26 @@ $effect(() => {
 	if (transcribeMode) showAnnotations = true;
 });
 
+// Scroll-sync: when activeAnnotationId changes, navigate to its page
+$effect(() => {
+	if (!activeAnnotationId || !pdfDoc) return;
+	const ann = annotations.find((a) => a.id === activeAnnotationId);
+	if (!ann) return;
+
+	if (ann.pageNumber !== currentPage) {
+		currentPage = ann.pageNumber;
+	}
+
+	// After page renders, scroll the annotation into view (double-rAF for async render)
+	const targetId = activeAnnotationId;
+	requestAnimationFrame(() => {
+		requestAnimationFrame(() => {
+			const el = document.querySelector(`[data-testid="annotation-${targetId}"]`);
+			el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+		});
+	});
+});
+
 function prevPage() {
 	if (currentPage > 1) currentPage -= 1;
 }

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

@@ -197,8 +197,10 @@ onMount(() => {
 		bind:transcribeMode={transcribeMode}
 	/>
 
-	<div class="relative flex-1 overflow-hidden {transcribeMode ? 'flex' : ''}">
-		<div class={transcribeMode ? 'relative flex-1 overflow-hidden' : 'absolute inset-0'}>
+	<div class="relative flex-1 overflow-hidden {transcribeMode ? 'flex flex-col md:flex-row' : ''}">
+		<div
+			class={transcribeMode ? 'relative min-h-[40vh] flex-1 overflow-hidden md:min-h-0' : 'absolute inset-0'}
+		>
 			<DocumentViewer
 				doc={doc}
 				fileUrl={fileUrl}
@@ -213,7 +215,9 @@ onMount(() => {
 		</div>
 
 		{#if transcribeMode}
-			<div class="w-[400px] shrink-0 border-l border-line lg:w-[480px]">
+			<div
+				class="shrink-0 border-t border-line md:w-[400px] md:border-t-0 md:border-l lg:w-[480px]"
+			>
 				<TranscriptionEditView
 					documentId={doc.id}
 					blocks={transcriptionBlocks}