From 53aa32e07f5dbcda605626a5705e5400c28a1c66 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 11 Mar 2026 18:19:02 +0000
Subject: [PATCH] fix: improve checklist note card text wrapping, spacing, and
 padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace `truncate` with `break-words min-w-0` so long checklist text
  wraps visibly instead of being clipped
- Increase vertical spacing between items (space-y-1 → space-y-2)
- Add bottom margin (mb-6) to prevent action buttons overlapping content
- Align checkboxes to top of multi-line items (items-start + mt-0.5)

https://claude.ai/code/session_01UVNA5wucVEjRQzwRxMhTZ9
---
 src/lib/components/NoteCard.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/NoteCard.svelte b/src/lib/components/NoteCard.svelte
index d68e21f..053c30e 100644
--- a/src/lib/components/NoteCard.svelte
+++ b/src/lib/components/NoteCard.svelte
@@ -138,17 +138,17 @@
 	{/if}
 
 	{#if note.checklistMode && checklistItems.length > 0}
-		<ul class="space-y-1" data-testid="note-checklist-preview">
+		<ul class="space-y-2 mb-6" data-testid="note-checklist-preview">
 			{#each sortedChecklistItems.slice(0, 8) as item}
-				<li class="flex items-center gap-2 text-sm {item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}">
+				<li class="flex items-start gap-2 text-sm {item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}">
 					<input
 						type="checkbox"
 						checked={item.checked}
 						onclick={(e) => { e.stopPropagation(); toggleChecklistItem(item); }}
-						class="h-3.5 w-3.5 rounded border-[var(--border-subtle)] text-[var(--primary)] cursor-pointer"
+						class="mt-0.5 h-3.5 w-3.5 shrink-0 rounded border-[var(--border-subtle)] text-[var(--primary)] cursor-pointer"
 						data-testid="card-checklist-checkbox"
 					/>
-					<span class="truncate">{item.text}</span>
+					<span class="break-words min-w-0">{item.text}</span>
 				</li>
 			{/each}
 			{#if checklistItems.length > 8}