From 8ef6ecb9e386bac3fcf37ede4b5c8e4ce0832a3d Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@data-pixel.com>
Date: Tue, 23 Dec 2025 12:53:56 +0100
Subject: [PATCH] FIX: context menu overflow on screen edges

---
 js/events.js | 47 +++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 41 insertions(+), 6 deletions(-)

diff --git a/js/events.js b/js/events.js
index 39c239b..209f0d4 100644
--- a/js/events.js
+++ b/js/events.js
@@ -275,9 +275,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
                 contextTrack = trackDataStore.get(trackItem);
                 if (contextTrack) {
                     const rect = menuBtn.getBoundingClientRect();
-                    contextMenu.style.top = `${rect.bottom + 5}px`;
-                    contextMenu.style.left = `${rect.left}px`;
-                    contextMenu.style.display = 'block';
+                    positionMenu(contextMenu, rect.left, rect.bottom + 5, rect);
                 }
             }
             return;
@@ -307,9 +305,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
             contextTrack = trackDataStore.get(trackItem);
 
             if (contextTrack) {
-                contextMenu.style.top = `${e.pageY}px`;
-                contextMenu.style.left = `${e.pageX}px`;
-                contextMenu.style.display = 'block';
+                positionMenu(contextMenu, e.pageX, e.pageY);
             }
         }
     });
@@ -387,3 +383,42 @@ function formatTime(seconds) {
     const s = Math.floor(seconds % 60);
     return `${m}:${String(s).padStart(2, '0')}`;
 }
+
+function positionMenu(menu, x, y, anchorRect = null) {
+    // Temporarily show to measure dimensions
+    menu.style.visibility = 'hidden';
+    menu.style.display = 'block';
+    
+    const menuWidth = menu.offsetWidth;
+    const menuHeight = menu.offsetHeight;
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+    
+    let left = x;
+    let top = y;
+
+    if (anchorRect) {
+        // Adjust horizontal position if it overflows right
+        if (left + menuWidth > windowWidth - 10) { // 10px buffer
+            left = anchorRect.right - menuWidth;
+            if (left < 10) left = 10;
+        }
+        // Adjust vertical position if it overflows bottom
+        if (top + menuHeight > windowHeight - 10) {
+            top = anchorRect.top - menuHeight - 5;
+        }
+    } else {
+        // Adjust horizontal position if it overflows right
+        if (left + menuWidth > windowWidth - 10) {
+            left = windowWidth - menuWidth - 10;
+        }
+        // Adjust vertical position if it overflows bottom
+        if (top + menuHeight > windowHeight - 10) {
+            top = y - menuHeight;
+        }
+    }
+
+    menu.style.top = `${top}px`;
+    menu.style.left = `${left}px`;
+    menu.style.visibility = 'visible';
+}