From 917aef1865fa775b56d358a39c0dfe37be01a887 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 11 Mar 2026 19:05:59 +0000
Subject: [PATCH] fix: increase checklist item padding and fix text overflow in
 editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add more vertical padding (py-1 → py-1.5) to checklist items for better
readability. Add min-w-0 to the text input so long text is constrained
within the flex container instead of overflowing out of the note.

https://claude.ai/code/session_0163L1u9MfL1C6Rv3yAw8RKs
---
 src/lib/components/Checklist.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Checklist.svelte b/src/lib/components/Checklist.svelte
index 3d8cb42..18cdeb0 100644
--- a/src/lib/components/Checklist.svelte
+++ b/src/lib/components/Checklist.svelte
@@ -121,7 +121,7 @@
 		class="space-y-0.5"
 	>
 		{#each activeItems as item (item.id)}
-			<div class="group flex items-center gap-2 py-1" animate:flip={{ duration: flipDurationMs }}>
+			<div class="group flex items-center gap-2 py-1.5" animate:flip={{ duration: flipDurationMs }}>
 				<div use:dragHandle aria-label="drag handle" class="drag-handle cursor-grab max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100 transition-opacity duration-150" data-testid="checklist-drag-handle">
 					<GripVertical class="h-4 w-4 text-[var(--text-muted)]" />
 				</div>
@@ -137,7 +137,7 @@
 					value={item.text}
 					oninput={(e) => updateText(item.id, (e.target as HTMLInputElement).value)}
 					onkeydown={(e) => handleKeydown(e, item.id)}
-					class="flex-1 bg-transparent text-sm outline-none {item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}"
+					class="flex-1 min-w-0 bg-transparent text-sm outline-none {item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}"
 					placeholder="List item"
 					data-testid="checklist-input"
 				/>
@@ -176,7 +176,7 @@
 			{#if doneExpanded}
 				<div class="mt-1 space-y-0.5 pl-5" data-testid="checklist-done-section">
 					{#each doneItems as item (item.id)}
-						<div class="group flex items-center gap-2 py-1">
+						<div class="group flex items-center gap-2 py-1.5">
 							<input
 								type="checkbox"
 								checked={item.checked}