design subtask & optimise code

src/app/components/add-task/add-task.component.html

@@ -230,7 +230,7 @@
           <img class="add" src="./../../../assets/img/add.svg" alt="" />
           } @if (taskData.subtasks) {
           <div class="subtasks">
-            @for (task of taskData.subtasks; track task) {
+            @for (task of taskData.subtasks.reverse(); track task) {
             <div class="single-subtask">
               <p>- {{ task }}</p>
               <img

src/app/components/add-task/add-task.component.scss

@@ -120,14 +120,18 @@ p {
 }
 
 .subtasks {
-  padding: 12px 6px;
+  padding: 12px 0;
+  margin-right: 14px;
   .single-subtask {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 3px 6px;
+    padding: 6px 9px;
     width: 100%;
     cursor: pointer;
+    p {
+      padding: 0;
+    }
     &:hover {
       border-radius: 12px;
       background-color: var(--light-gray);

src/app/components/add-task/add-task.component.ts

@@ -25,7 +25,6 @@ export class AddTaskComponent {
   searchValue: string = '';
   searchInput: boolean = false;
   filteredUsers: User[] = [];
-
   constructor(public firebaseService: FirebaseService) {}
 
   taskData: TaskData = {
@@ -43,7 +42,7 @@ export class AddTaskComponent {
   }
 
   addSubtask(subtaskName: string) {
-    this.taskData.subtasks.push(subtaskName);
+    this.taskData.subtasks.unshift(subtaskName);
     this.saveTaskData();
   }