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'; } }