From d4ef15212f1df240f63d58c0465daf52734a2fe3 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 19 Feb 2025 18:40:26 +0200
Subject: [PATCH] style(tasks): improve individual items design

---
 .../app/widgets/type_widgets/task_list.ts     | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/public/app/widgets/type_widgets/task_list.ts b/src/public/app/widgets/type_widgets/task_list.ts
index 711253b22..573e7de63 100644
--- a/src/public/app/widgets/type_widgets/task_list.ts
+++ b/src/public/app/widgets/type_widgets/task_list.ts
@@ -11,8 +11,8 @@ const TPL = `
         <input type="text" placeholder="Add a new task" class="add-new-task" />
     </header>
 
-    <div class="task-container">
-    </div>
+    <ol class="task-container">
+    </ol>
 
     <style>
         .note-detail-task-list {
@@ -34,12 +34,26 @@ const TPL = `
             width: 100%;
             padding: 0.25em 0.5em;
         }
+
+        .note-detail-task-list .task-container {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+            border-radius: var(--bs-border-radius);
+            overflow: hidden;
+        }
+
+        .note-detail-task-list .task-container li {
+            background: var(--input-background-color);
+            border-bottom: 1px solid var(--main-background-color);
+            padding: 0.5em 1em;
+        }
     </style>
 </div>
 `;
 
 function buildTask(task: FTask) {
-    return `<div class="task">${task.title}</div>`;
+    return `<li class="task">${task.title}</li>`;
 }
 
 export default class TaskListWidget extends TypeWidget {