From d41bc25fb09a2c5c3c882e19390635e8141a963e Mon Sep 17 00:00:00 2001
From: mARTin <mail@martin-bierschenk.de>
Date: Fri, 6 Mar 2026 15:30:15 +0100
Subject: [PATCH] fix: always apply completed class for strikethrough and
 improve checkbox styling for Safari mobile

---
 src/app/globals.css           | 16 ++++++++++++++++
 src/components/WeeklyView.tsx | 16 +++++++++++++---
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 5f855f2..2bf9df3 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -700,6 +700,22 @@ h3 {
   color: var(--weekly-completed);
 }
 
+.weekly-task-item.completed-with-checkbox .weekly-task-text {
+  opacity: 0.7;
+}
+
+.task-checkbox {
+  cursor: pointer;
+  border-radius: 3px;
+  border: 1px solid var(--weekly-border);
+  transition: all 0.2s;
+}
+
+.task-checkbox:checked {
+  background-color: var(--weekly-teal);
+  border-color: var(--weekly-teal);
+}
+
 .weekly-task-text {
   flex: 1;
   font-family: var(--weekly-task-font, var(--weekly-font));
diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx
index f0bf76b..bb76fc7 100644
--- a/src/components/WeeklyView.tsx
+++ b/src/components/WeeklyView.tsx
@@ -6716,7 +6716,7 @@ function TaskItem({
     return (
         <li
             ref={taskItemRef}
-            className={`weekly-task-item ${variant} ${task.completed && !showTaskCheckboxes ? "completed" : ""} ${isSomeday ? "relative mx-2" : ""} ${touchActive ? "touch-active" : ""} ${swipeX !== 0 ? "task-swipe-container" : ""}`}
+            className={`weekly-task-item ${variant} ${task.completed ? "completed" : ""} ${task.completed && showTaskCheckboxes ? "completed-with-checkbox" : ""} ${isSomeday ? "relative mx-2" : ""} ${touchActive ? "touch-active" : ""} ${swipeX !== 0 ? "task-swipe-container" : ""}`}
             style={task.project?.color ? { borderLeft: `3px solid ${task.project.color}`, paddingLeft: "6px" } : undefined}
             draggable={!isEditing && !isNotesOpen && swipeX === 0}
             onDragStart={(e) => {
@@ -6865,7 +6865,7 @@ function TaskItem({
                     ) : (
                         <>
                             <span
-                                className={`weekly-task-text flex-1 ${task.completed && !showTaskCheckboxes ? "completed" : ""}`}
+                                className={`weekly-task-text flex-1 ${task.completed ? "completed" : ""}`}
                                 onClick={(e) => {
                                     if (variant === "default" && !showTaskCheckboxes) onToggle();
                                     // For minimal/someday, parent onClick handles edit
@@ -6884,7 +6884,17 @@ function TaskItem({
                                         onChange={(e) => { e.stopPropagation(); onToggle(); }}
                                         onClick={(e) => e.stopPropagation()}
                                         className="task-checkbox flex-shrink-0"
-                                        style={{ width: "14px", height: "14px", margin: 0, cursor: "pointer", position: "relative", top: "4px", left: "-2px", accentColor: "#333" }}
+                                        style={{ 
+                                            width: "16px", 
+                                            height: "16px", 
+                                            margin: 0, 
+                                            cursor: "pointer", 
+                                            position: "relative", 
+                                            top: "3px", 
+                                            left: "-2px", 
+                                            accentColor: "var(--weekly-teal, #009a9a)",
+                                            WebkitAppearance: "checkbox"
+                                        }}
                                     />
                                 )}
                                 {needsSync && (