diff --git a/src/public/app/widgets/type_widgets/task_list.ts b/src/public/app/widgets/type_widgets/task_list.ts
index f678e4c36..45bd4b6f1 100644
--- a/src/public/app/widgets/type_widgets/task_list.ts
+++ b/src/public/app/widgets/type_widgets/task_list.ts
@@ -26,7 +26,7 @@ const TPL = `
             padding: 10px;
         }
 
-        .note-detail-task-list header {
+        .note-detail-task-list > header {
             position: sticky;
             top: 0;
             z-index: 100;
@@ -60,15 +60,23 @@ const TPL = `
             transition: background 250ms ease-in-out;
         }
 
+        .note-detail-task-list .task-container li > header {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-end;
+            align-items: center;
+        }
+
         .note-detail-task-list .task-container li .check {
             margin-right: 0.5em;
         }
 
+        .note-detail-task-list .task-container li .title {
+            flex-grow: 1;
+        }
+
         .note-detail-task-list .task-container li .due-date {
-            float: right;
             font-size: 0.9rem;
-            margin-top: 0.1rem;
-            vertical-align: middle;
         }
 
         .note-detail-task-list .task-container li.overdue .due-date {
@@ -91,8 +99,9 @@ function buildTasks(tasks: FTask[]) {
         }
 
         html += `<li class="${classes.join(" ")}" data-task-id="${task.taskId}">`;
+        html += "<header>";
         html += `<input type="checkbox" class="check" ${task.isDone ? "checked" : ""} />`;
-        html += task.title;
+        html += `<span class="title">${task.title}</span>`;
         if (task.dueDate) {
             html += `<span class="due-date">`;
             html += `<span class="bx bx-calendar"></span> `;
@@ -106,6 +115,7 @@ function buildTasks(tasks: FTask[]) {
             });
             html += "</span>";
         }
+        html += "</header>";
         html += `<div class="edit-container"></div>`;
         html += `</li>`;
     }
@@ -151,20 +161,19 @@ export default class TaskListWidget extends TypeWidget {
         });
 
         this.$taskContainer.on("click", "li", (e) => {
-            const $target = $(e.target);
-
-            // Don't collapse when clicking on an inside element such as the due date dropdown.
-            if (e.currentTarget !== e.target) {
+            if ((e.target as HTMLElement).tagName === "INPUT") {
                 return;
             }
 
+            const $target = $(e.target);
+
             // Clear existing edit containers.
             const $existingContainers = this.$taskContainer.find(".edit-container");
 
             $existingContainers.html("");
 
             // Add the new edit container.
-            const $editContainer = $target.find(".edit-container");
+            const $editContainer = $target.closest("li").find(".edit-container");
             const task = this.#getCorrespondingTask($target);
             if (task) {
                 $editContainer.html(buildEditContainer(task));
@@ -192,7 +201,11 @@ export default class TaskListWidget extends TypeWidget {
     }
 
     #getCorrespondingTask($target: JQuery<HTMLElement>) {
-        const taskId = $target.closest("li")[0].dataset.taskId;
+        const $parentEl = $target.closest("li");
+        if (!$parentEl.length) {
+            return;
+        }
+        const taskId = $parentEl[0].dataset.taskId;
         if (!taskId) {
             return;
         }