bugfixes

src/app/components/board/task/task-menu/task-menu.component.scss

@@ -1,7 +1,7 @@
 section {
   position: absolute;
   top: 30px;
-  left: 40px;
+  right: 45px;
   text-align: center;
   width: fit-content;
   height: fit-content;

src/app/components/board/task/task.component.html

@@ -1,55 +1,54 @@
-<section (click)="handleMenuButtonClick($event, task.id)">
+<section>
-  <div
+  <div (click)="handleMenuButtonClick($event, task.id)">
-    class="content"
+    <div
-    draggable="true"
+      class="content"
-    (dragstart)="dragDropService.startDragging($event, task.id)"
+      draggable="true"
-  >
+      (dragstart)="dragDropService.startDragging($event, task.id)"
-    <div class="header">
+    >
-      <div
+      <div class="header">
-        class="category"
+        <div
-        [style.background-color]="categoryColors.get(task.category)"
+          class="category"
-      >
+          [style.background-color]="categoryColors.get(task.category)"
-        {{ task.category }}
-      </div>
-      <div
-        class="menu-btn"
-        (click)="handleMenuButtonClick($event, task.status)"
-      >
-        <img
-          class="menu-img"
-          src="./../../../../assets/img/board/menu.svg"
-          alt="menu"
-        />
-      </div>
-    </div>
-    <div class="headline">{{ task.title }}</div>
-    <div class="description">
-      {{ task.description }}
-    </div>
-    @if(task.subtasksTitle.length > 0) {
-    <div class="subtask">
-      <div class="subtask-line">
-        <span
-          class="filler-full"
-          [style.width.%]="completedSubtasksPercent()"
-        ></span>
-      </div>
-      <div class="subtask-text">
-        {{ completedSubtasks() }} / {{ task.subtasksTitle.length }} Subtasks
-      </div>
-    </div>
-    }
-    <div class="footer">
-      <div class="footer-badge">
-        @for (assigned of task.assigned; track assigned) {
-        <span
-          class="footer-badged"
-          [style.background-color]="userBadgedColor(assigned)"
-          >{{ userBadged(assigned) }}</span
         >
-        }
+          {{ task.category }}
+        </div>
+        <div class="menu-btn" (click)="handleMenuButtonClick($event, task.id)">
+          <img
+            class="menu-img"
+            src="./../../../../assets/img/board/menu.svg"
+            alt="menu"
+          />
+        </div>
+      </div>
+      <div class="headline">{{ task.title }}</div>
+      <div class="description">
+        {{ task.description }}
+      </div>
+      @if(task.subtasksTitle.length > 0) {
+      <div class="subtask">
+        <div class="subtask-line">
+          <span
+            class="filler-full"
+            [style.width.%]="completedSubtasksPercent()"
+          ></span>
+        </div>
+        <div class="subtask-text">
+          {{ completedSubtasks() }} / {{ task.subtasksTitle.length }} Subtasks
+        </div>
+      </div>
+      }
+      <div class="footer">
+        <div class="footer-badge">
+          @for (assigned of task.assigned; track assigned) {
+          <span
+            class="footer-badged"
+            [style.background-color]="userBadgedColor(assigned)"
+            >{{ userBadged(assigned) }}</span
+          >
+          }
+        </div>
+        <div class="footer-priority prio-{{ task.priority }}"></div>
       </div>
-      <div class="footer-priority prio-{{ task.priority }}"></div>
     </div>
   </div>
   @if (isMenuOpen){

src/app/components/board/task/task.component.ts

@@ -46,20 +46,23 @@ export class TaskComponent implements OnInit, OnDestroy {
     this.isPageViewMedia = window.innerWidth <= 650;
   }
 
-  handleMenuButtonClick(event: MouseEvent, taskIdOrStatus: string | undefined) {
+  handleMenuButtonClick(event: MouseEvent, taskId: string | undefined) {
     event.stopPropagation();
     const targetElement = event.target as HTMLElement;
     targetElement.classList.contains('menu-btn') ||
     targetElement.classList.contains('menu-img')
-      ? this.openTaskMenu(taskIdOrStatus)
+      ? this.toggleTaskMenu()
-      : this.openTaskDetailsOverlay(taskIdOrStatus);
+      : this.openTaskDetailsOverlay(taskId);
   }
 
-  openTaskMenu(taskStatus: string | undefined) {
+  toggleTaskMenu() {
     this.isMenuOpen = !this.isMenuOpen;
   }
 
   openTaskDetailsOverlay(taskId: string | undefined) {
+    if (this.isMenuOpen) {
+      this.toggleTaskMenu();
+    }
     this.isPageViewMedia
       ? this.router.navigate(['/task', taskId])
       : this.overlayService.setOverlayData('taskOverlay', taskId);