From 22ebabfaf7163f72b48cd86ae50fc7130d847443 Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <cabassut.frederic@gmail.com>
Date: Fri, 6 Mar 2026 22:09:14 +0100
Subject: [PATCH] fix: prevent note content overflow on mobile

Wrap editor content in a scrollable container with max-h-[60vh] so long
notes scroll within the editor instead of pushing it off-screen. Also make
the overlay itself scrollable with bottom padding for small viewports.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/NoteEditor.svelte | 50 +++++++++++++++-------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/NoteEditor.svelte b/src/lib/components/NoteEditor.svelte
index 0d8e209..7d37c3e 100644
--- a/src/lib/components/NoteEditor.svelte
+++ b/src/lib/components/NoteEditor.svelte
@@ -76,14 +76,14 @@
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class="fixed inset-0 z-40 flex items-start justify-center bg-black/50 pt-20"
+	class="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto bg-black/50 pt-20 pb-10"
 	onclick={save}
 	onkeydown={handleKeydown}
 	data-testid="note-editor-overlay"
 >
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		class="mx-4 w-full max-w-xl rounded-sm border border-[var(--border)]"
+		class="mx-4 flex w-full max-w-xl flex-col rounded-sm border border-[var(--border)]"
 		style={bgStyle}
 		onclick={(e) => e.stopPropagation()}
 		onkeydown={(e) => { e.stopPropagation(); handleKeydown(e); }}
@@ -99,28 +99,30 @@
 		/>
 
 		<!-- Content -->
-		{#if checklistMode}
-			<div class="px-4 py-2">
-				<Checklist {content} onChange={(c) => (content = c)} />
-			</div>
-		{:else if rawMarkdownMode}
-			<textarea
-				bind:this={textareaEl}
-				placeholder="Add a crumb..."
-				bind:value={content}
-				class="min-h-[300px] w-full resize-none bg-transparent px-4 py-2 text-sm text-[var(--text)] outline-none placeholder:text-[var(--text-muted)]"
-				rows="12"
-				data-testid="note-content-input"
-			></textarea>
-		{:else}
-			<TiptapEditor
-				{content}
-				onUpdate={(md) => (content = md)}
-				onEditor={(e) => (tiptapEditor = e)}
-				onTransaction={() => editorTick++}
-				placeholder="Add a crumb..."
-			/>
-		{/if}
+		<div class="max-h-[60vh] overflow-y-auto">
+			{#if checklistMode}
+				<div class="px-4 py-2">
+					<Checklist {content} onChange={(c) => (content = c)} />
+				</div>
+			{:else if rawMarkdownMode}
+				<textarea
+					bind:this={textareaEl}
+					placeholder="Add a crumb..."
+					bind:value={content}
+					class="min-h-[300px] w-full resize-none bg-transparent px-4 py-2 text-sm text-[var(--text)] outline-none placeholder:text-[var(--text-muted)]"
+					rows="12"
+					data-testid="note-content-input"
+				></textarea>
+			{:else}
+				<TiptapEditor
+					{content}
+					onUpdate={(md) => (content = md)}
+					onEditor={(e) => (tiptapEditor = e)}
+					onTransaction={() => editorTick++}
+					placeholder="Add a crumb..."
+				/>
+			{/if}
+		</div>
 
 		<!-- Formatting toolbar -->
 		{#if !rawMarkdownMode && !checklistMode}