From b82f3c485558718fd68359b68f4e32c4f0827c6f Mon Sep 17 00:00:00 2001
From: Joan <lgray.foxl@gmail.com>
Date: Sat, 7 Feb 2026 23:03:58 +0100
Subject: [PATCH] fix(ui): adjust dropdown offset when flipped up

---
 pwa/src/components/common/GameDropdown.tsx | 28 +++++++++++-----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/pwa/src/components/common/GameDropdown.tsx b/pwa/src/components/common/GameDropdown.tsx
index 25f57f5..09c3dfb 100644
--- a/pwa/src/components/common/GameDropdown.tsx
+++ b/pwa/src/components/common/GameDropdown.tsx
@@ -67,34 +67,34 @@ export const GameDropdown: React.FC<GameDropdownProps> = ({
     if (!isOpen) return null;
 
     // Use passed position or fallback to last click position
-    // Default offset of -10 to center mouse over menu
     const targetX = position ? position.x : lastClickPos.x;
     const targetY = position ? position.y : lastClickPos.y;
 
     let x = targetX - 10;
-    let y = targetY - 10;
+
+    // Determine flip direction first using raw position
     let flipUp = false;
-
-    // Simple adjustment logic (can be improved with measuring ref)
-    // We'll trust the parent passed reasonable coords, but ensure it doesn't go off-screen right/bottom
     if (typeof window !== 'undefined') {
-        const viewportWidth = window.innerWidth;
         const viewportHeight = window.innerHeight;
-
-        // Approximate width if not measured yet (or use min-width)
-        const estimatedWidth = parseInt(width) || 200;
         const estimatedHeight = 200; // Guess for now
 
+        if (targetY + estimatedHeight > viewportHeight) {
+            flipUp = true;
+        }
+
+        // Adjust width constrained by viewport
+        const viewportWidth = window.innerWidth;
+        const estimatedWidth = parseInt(width) || 200;
         if (x + estimatedWidth > viewportWidth) {
             x = viewportWidth - estimatedWidth - 10;
         }
-
-        if (y + estimatedHeight > viewportHeight) {
-            // Flip up if space
-            flipUp = true;
-        }
     }
 
+    // Apply offset based on direction
+    // If flipping up, we want the bottom to be slightly below the mouse (y + 10)
+    // If flipping down, we want the top to be slightly above the mouse (y - 10)
+    const y = flipUp ? targetY + 10 : targetY - 10;
+
     return createPortal(
         <div
             ref={dropdownRef}