From dfd726732b6db0b35933a19ad5d920a621a6c2d0 Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <cabassut.frederic@gmail.com>
Date: Mon, 9 Mar 2026 01:16:34 +0100
Subject: [PATCH] fix: increase focusable text area on mobile for rich text
 editor

Make the Tiptap editor fill the full wrapper height using flexbox so
tapping anywhere in the content area focuses the editor, not just the
small text area at the top.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/TiptapEditor.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/TiptapEditor.svelte b/src/lib/components/TiptapEditor.svelte
index 8875a4a..3ce6d3d 100644
--- a/src/lib/components/TiptapEditor.svelte
+++ b/src/lib/components/TiptapEditor.svelte
@@ -57,16 +57,18 @@
 	});
 </script>
 
+<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
 <div
 	bind:this={element}
-	class="tiptap-wrapper prose prose-sm min-h-[300px] max-w-none px-4 py-2 text-[var(--text)]"
+	class="tiptap-wrapper prose prose-sm flex min-h-[300px] max-w-none flex-col px-4 py-2 text-[var(--text)]"
 	data-testid="tiptap-editor"
+	onclick={() => editor?.commands.focus()}
 ></div>
 
 <style>
 	.tiptap-wrapper :global(.tiptap) {
 		outline: none;
-		min-height: 80px;
+		flex: 1;
 	}
 
 	.tiptap-wrapper :global(.tiptap p.is-editor-empty:first-child::before) {