From 50e4335b0fe1984911537ae919e64030c8079312 Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <cabassut.frederic@gmail.com>
Date: Sun, 8 Mar 2026 19:08:23 +0100
Subject: [PATCH] fix: show checklist actions on mobile

Apply the same max-md:opacity-100 pattern from NoteCard to Checklist
drag handles and remove buttons, making them visible on touch devices.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 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 33c0973..48e0445 100644
--- a/src/lib/components/Checklist.svelte
+++ b/src/lib/components/Checklist.svelte
@@ -121,7 +121,7 @@
 	>
 		{#each activeItems as item (item.id)}
 			<div class="group flex items-center gap-2" animate:flip={{ duration: flipDurationMs }}>
-				<div use:dragHandle aria-label="drag handle" class="drag-handle cursor-grab opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity duration-150" data-testid="checklist-drag-handle">
+				<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>
 				<input
@@ -142,7 +142,7 @@
 				/>
 				<button
 					onclick={() => removeItem(item.id)}
-					class="opacity-0 group-hover:opacity-100 focus:opacity-100"
+					class="max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100"
 					aria-label="Remove item"
 					data-testid="checklist-remove"
 				>
@@ -186,7 +186,7 @@
 							<span class="flex-1 text-sm text-[var(--text-muted)] line-through">{item.text}</span>
 							<button
 								onclick={() => removeItem(item.id)}
-								class="opacity-0 group-hover:opacity-100 focus:opacity-100"
+								class="max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100"
 								aria-label="Remove item"
 								data-testid="checklist-done-remove"
 							>