mirror/crumbs-original
1
0
Fork 1
mirror of https://github.com/bretzel-app/crumbs.git synced 2026-10-14 12:28:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve checklist note card text wrapping, spacing, and padding

Browse Source 
- 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
This commit is contained in:
Claude
2026-03-11 19:43:13 +01:00
committed by Fred Cabassut
parent b08ef84d43
commit 5f52864945
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/NoteCard.svelte
+4 -4
View File
@@ -138,17 +138,17 @@
{/if} {/if}
{#if note.checklistMode && checklistItems.length > 0} {#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} {#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 <input
type="checkbox" type="checkbox"
checked={item.checked} checked={item.checked}
onclick={(e) => { e.stopPropagation(); toggleChecklistItem(item); }} 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" data-testid="card-checklist-checkbox"
/> />
<span class="truncate">{item.text}</span> <span class="break-words min-w-0">{item.text}</span>
</li> </li>
{/each} {/each}
{#if checklistItems.length > 8} {#if checklistItems.length > 8}