From e2927893f7e2655d693cf77c18b97493804c804d Mon Sep 17 00:00:00 2001
From: Meleki <meleki@gott.local>
Date: Tue, 3 Mar 2026 09:27:09 +0100
Subject: [PATCH] =?UTF-8?q?style:=20Card-Dropdown=20=C3=B6ffnet=20nach=20r?=
 =?UTF-8?q?echts=20statt=20unten?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Position: rechts neben dem Trigger-Button (gleiche Höhe)
- Fallback: links öffnen wenn rechts kein Platz
- Viewport-Overflow-Check für unten und links
---
 wwwroot/js/pages/dashboard.js | 38 ++++++++++++++++++++++++-----------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/wwwroot/js/pages/dashboard.js b/wwwroot/js/pages/dashboard.js
index 3696434..ba8237c 100644
--- a/wwwroot/js/pages/dashboard.js
+++ b/wwwroot/js/pages/dashboard.js
@@ -78,18 +78,25 @@ registerPage('dashboard', {
       menuTrigger.addEventListener('click', (e) => {
         e.stopPropagation();
         closeAllCardMenus();
-        // Position fixed dropdown relative to trigger
+        // Position fixed dropdown to the right of trigger
         const rect = menuTrigger.getBoundingClientRect();
-        menuDropdown.style.top = `${rect.bottom + 4}px`;
-        menuDropdown.style.left = `${rect.right - menuDropdown.offsetWidth}px`;
+        menuDropdown.style.top = `${rect.top}px`;
+        menuDropdown.style.left = `${rect.right + 4}px`;
         menuDropdown.hidden = !menuDropdown.hidden;
-        // Adjust if off-screen right
+        // Adjust if off-screen
         if (!menuDropdown.hidden) {
           const dropRect = menuDropdown.getBoundingClientRect();
+          // If off-screen right, flip to left side
           if (dropRect.right > window.innerWidth) {
-            menuDropdown.style.left = `${window.innerWidth - dropRect.width - 8}px`;
+            menuDropdown.style.left = `${rect.left - dropRect.width - 4}px`;
           }
-          if (dropRect.left < 0) {
+          // If off-screen bottom, align to bottom of viewport
+          if (dropRect.bottom > window.innerHeight) {
+            menuDropdown.style.top = `${window.innerHeight - dropRect.height - 8}px`;
+          }
+          // Safety: if off-screen left after flip
+          const finalRect = menuDropdown.getBoundingClientRect();
+          if (finalRect.left < 0) {
             menuDropdown.style.left = '8px';
           }
         }
@@ -223,18 +230,25 @@ registerPage('dashboard', {
       menuTrigger.addEventListener('click', (e) => {
         e.stopPropagation();
         closeAllCardMenus();
-        // Position fixed dropdown relative to trigger
+        // Position fixed dropdown to the right of trigger
         const rect = menuTrigger.getBoundingClientRect();
-        menuDropdown.style.top = `${rect.bottom + 4}px`;
-        menuDropdown.style.left = `${rect.right - menuDropdown.offsetWidth}px`;
+        menuDropdown.style.top = `${rect.top}px`;
+        menuDropdown.style.left = `${rect.right + 4}px`;
         menuDropdown.hidden = !menuDropdown.hidden;
-        // Adjust if off-screen right
+        // Adjust if off-screen
         if (!menuDropdown.hidden) {
           const dropRect = menuDropdown.getBoundingClientRect();
+          // If off-screen right, flip to left side
           if (dropRect.right > window.innerWidth) {
-            menuDropdown.style.left = `${window.innerWidth - dropRect.width - 8}px`;
+            menuDropdown.style.left = `${rect.left - dropRect.width - 4}px`;
           }
-          if (dropRect.left < 0) {
+          // If off-screen bottom, align to bottom of viewport
+          if (dropRect.bottom > window.innerHeight) {
+            menuDropdown.style.top = `${window.innerHeight - dropRect.height - 8}px`;
+          }
+          // Safety: if off-screen left after flip
+          const finalRect = menuDropdown.getBoundingClientRect();
+          if (finalRect.left < 0) {
             menuDropdown.style.left = '8px';
           }
         }