From a862a10eb87da803b40edfe452d008e150587e5b Mon Sep 17 00:00:00 2001
From: Sergio Visinoni <piffio@piffio.org>
Date: Fri, 24 Apr 2026 09:18:14 +0200
Subject: [PATCH] fix: fix admin dropdown menu overflow at viewport bottom

Implement smart positioning for dropdown menus in admin pages to prevent
overflow when opening near the bottom of the viewport. The menu now
detects available space and flips to open upward when needed.

Changes:
- Added viewport-aware positioning to admin/links dropdown toggle
- Added viewport-aware positioning to admin/users dropdown toggle
- Menu opens upward when space below is insufficient
- Maintains default downward opening for normal cases
---
 frontend/src/routes/admin/links/+page.svelte | 16 +++++++++++++++-
 frontend/src/routes/admin/users/+page.svelte | 16 +++++++++++++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/frontend/src/routes/admin/links/+page.svelte b/frontend/src/routes/admin/links/+page.svelte
index 971d2e4..04c1ecd 100644
--- a/frontend/src/routes/admin/links/+page.svelte
+++ b/frontend/src/routes/admin/links/+page.svelte
@@ -113,8 +113,22 @@
       dropdownPosition = null;
     } else {
       activeDropdown = linkId;
+
+      // Estimate dropdown height (~5 items at ~33px each + padding ≈ 200px)
+      const estimatedMenuHeight = 200;
+      const spaceBelow = window.innerHeight - rect.bottom;
+
+      let top: number;
+      if (spaceBelow < estimatedMenuHeight && rect.top > estimatedMenuHeight) {
+        // Not enough space below, open upward
+        top = rect.top - estimatedMenuHeight - 4;
+      } else {
+        // Default: open below
+        top = rect.bottom + 4;
+      }
+
       dropdownPosition = {
-        top: rect.bottom + 4,
+        top,
         right: window.innerWidth - rect.right
       };
     }
diff --git a/frontend/src/routes/admin/users/+page.svelte b/frontend/src/routes/admin/users/+page.svelte
index d685d08..519c622 100644
--- a/frontend/src/routes/admin/users/+page.svelte
+++ b/frontend/src/routes/admin/users/+page.svelte
@@ -89,8 +89,22 @@
       dropdownPosition = null;
     } else {
       activeDropdown = userId;
+
+      // Estimate dropdown height (~5 items at ~33px each + padding ≈ 200px)
+      const estimatedMenuHeight = 200;
+      const spaceBelow = window.innerHeight - rect.bottom;
+
+      let top: number;
+      if (spaceBelow < estimatedMenuHeight && rect.top > estimatedMenuHeight) {
+        // Not enough space below, open upward
+        top = rect.top - estimatedMenuHeight - 4;
+      } else {
+        // Default: open below
+        top = rect.bottom + 4;
+      }
+
       dropdownPosition = {
-        top: rect.bottom + 4,
+        top,
         right: window.innerWidth - rect.right
       };
     }