Fix task item collapse/expand toggle not responding to clicks

Move the toggle button from inside <label> to a sibling of <label>
so WebKit's native label click-forwarding no longer swallows the
button's click events. Update CSS selectors and positioning accordingly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: ComputelessComputer

apps/desktop/src/components/editor/Editor.css

@@ -23,6 +23,7 @@
 
 .tiptap ul[data-type="taskList"] li {
   min-height: var(--editor-line-height);
+  position: relative;
 }
 
 .tiptap ul[data-type="taskList"] li > label {
@@ -34,9 +35,9 @@
   display: none;
 }
 
-.tiptap ul[data-type="taskList"] .task-item-toggle {
+.tiptap ul[data-type="taskList"] li > .task-item-toggle {
   position: absolute;
-  right: calc(100% + 2px);
+  left: -18px;
   top: 50%;
   width: 16px;
   height: 16px;
@@ -53,32 +54,32 @@
   transform: translateY(-50%);
 }
 
-.tiptap ul[data-type="taskList"] .task-item-toggle svg {
+.tiptap ul[data-type="taskList"] li > .task-item-toggle svg {
   display: block;
   width: 16px;
   height: 16px;
   transition: transform 120ms ease;
 }
 
-.tiptap ul[data-type="taskList"] li.task-item--has-children > label .task-item-toggle {
+.tiptap ul[data-type="taskList"] li.task-item--has-children > .task-item-toggle {
   pointer-events: auto;
 }
 
 .tiptap ul[data-type="taskList"] li[data-type="taskItem"] ul[data-type="taskList"] .task-item-toggle {
   display: none;
 }
 
-.tiptap ul[data-type="taskList"] li.task-item--has-children:hover > label .task-item-toggle,
-.tiptap ul[data-type="taskList"] li.task-item--has-children:focus-within > label .task-item-toggle,
-.tiptap ul[data-type="taskList"] li.task-item--collapsed > label .task-item-toggle {
+.tiptap ul[data-type="taskList"] li.task-item--has-children:hover > .task-item-toggle,
+.tiptap ul[data-type="taskList"] li.task-item--has-children:focus-within > .task-item-toggle,
+.tiptap ul[data-type="taskList"] li.task-item--collapsed > .task-item-toggle {
   opacity: 1;
 }
 
-.tiptap ul[data-type="taskList"] li.task-item--has-children > label .task-item-toggle:hover {
+.tiptap ul[data-type="taskList"] li.task-item--has-children > .task-item-toggle:hover {
   color: #4b5563;
 }
 
-.tiptap ul[data-type="taskList"] li.task-item--has-children:not(.task-item--collapsed) > label .task-item-toggle svg {
+.tiptap ul[data-type="taskList"] li.task-item--has-children:not(.task-item--collapsed) > .task-item-toggle svg {
   transform: rotate(90deg);
 }
 

apps/desktop/src/components/editor/extensions/task-item/TaskItemNode.ts

@@ -224,9 +224,9 @@ export const CustomTaskItem = TaskItem.extend({
 
       listItem.dataset.checked = String(node.attrs.checked,);
       label.contentEditable = "false";
-      label.appendChild(toggle,);
       label.appendChild(checkbox,);
       label.appendChild(checkboxStyler,);
+      listItem.appendChild(toggle,);
       listItem.appendChild(label,);
       listItem.appendChild(content,);