diff --git a/frontend/src/lib/components/TranscriptionPanelHeader.svelte b/frontend/src/lib/components/TranscriptionPanelHeader.svelte
index fd574baf..6fdd937f 100644
--- a/frontend/src/lib/components/TranscriptionPanelHeader.svelte
+++ b/frontend/src/lib/components/TranscriptionPanelHeader.svelte
@@ -79,7 +79,7 @@ function handleReadClick() {
 		data-testid="panel-close"
 		onclick={onClose}
 		aria-label={m.transcription_panel_close()}
-		class="flex h-8 w-8 items-center justify-center rounded text-ink-2 transition-colors hover:bg-muted hover:text-ink"
+		class="flex h-11 w-11 items-center justify-center rounded text-ink-2 transition-colors hover:bg-muted hover:text-ink"
 	>
 		<svg
 			class="h-4 w-4"
diff --git a/frontend/src/lib/components/TranscriptionPanelHeader.svelte.test.ts b/frontend/src/lib/components/TranscriptionPanelHeader.svelte.test.ts
index 323a54ba..1a5ba2ad 100644
--- a/frontend/src/lib/components/TranscriptionPanelHeader.svelte.test.ts
+++ b/frontend/src/lib/components/TranscriptionPanelHeader.svelte.test.ts
@@ -119,6 +119,21 @@ describe('TranscriptionPanelHeader', () => {
 		await expect.element(page.getByText('0 Abschnitte')).toBeInTheDocument();
 	});
 
+	it('should have close button with 44px touch target classes', async () => {
+		render(TranscriptionPanelHeader, {
+			mode: 'read',
+			hasBlocks: true,
+			blockCount: 3,
+			lastEditedAt: null,
+			onModeChange: () => {},
+			onClose: () => {}
+		});
+
+		const closeBtn = document.querySelector('[data-testid="panel-close"]') as HTMLElement;
+		expect(closeBtn.classList.contains('h-11')).toBe(true);
+		expect(closeBtn.classList.contains('w-11')).toBe(true);
+	});
+
 	it('should show formatted date when lastEditedAt is provided', async () => {
 		render(TranscriptionPanelHeader, {
 			mode: 'read',