From c08c90381038c68bb39b1aec5cbe1a669f131784 Mon Sep 17 00:00:00 2001
From: Ryan <ryantl66@gmail.com>
Date: Tue, 25 Mar 2025 04:23:37 -0400
Subject: [PATCH] Adjust context menu to stay in viewport

---
 fileManager.js | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/fileManager.js b/fileManager.js
index 6121219..c045b7c 100644
--- a/fileManager.js
+++ b/fileManager.js
@@ -1371,13 +1371,15 @@ document.addEventListener("keydown", function(e) {
 
 // ---------- CONTEXT MENU SUPPORT FOR FILE LIST ----------
 
+// Function to display the context menu with provided items at (x, y)
 // Function to display the context menu with provided items at (x, y)
 function showFileContextMenu(x, y, menuItems) {
   let menu = document.getElementById("fileContextMenu");
   if (!menu) {
     menu = document.createElement("div");
     menu.id = "fileContextMenu";
-    menu.style.position = "absolute";
+    // Use fixed positioning so the menu is relative to the viewport
+    menu.style.position = "fixed";
     menu.style.backgroundColor = "#fff";
     menu.style.border = "1px solid #ccc";
     menu.style.boxShadow = "2px 2px 6px rgba(0,0,0,0.2)";
@@ -1394,11 +1396,7 @@ function showFileContextMenu(x, y, menuItems) {
     menuItem.style.padding = "5px 15px";
     menuItem.style.cursor = "pointer";
     menuItem.addEventListener("mouseover", () => {
-      if (document.body.classList.contains("dark-mode")) {
-        menuItem.style.backgroundColor = "#444"; // darker gray for dark mode
-      } else {
-        menuItem.style.backgroundColor = "#f0f0f0"; // light gray for light mode
-      }
+      menuItem.style.backgroundColor = document.body.classList.contains("dark-mode") ? "#444" : "#f0f0f0";
     });
     menuItem.addEventListener("mouseout", () => {
       menuItem.style.backgroundColor = "";
@@ -1409,9 +1407,20 @@ function showFileContextMenu(x, y, menuItems) {
     });
     menu.appendChild(menuItem);
   });
+  
+  // Use the event's clientX and clientY coordinates (which are viewport-relative)
   menu.style.left = x + "px";
   menu.style.top = y + "px";
   menu.style.display = "block";
+  
+  // Adjust if the menu would extend past the bottom of the viewport
+  const menuRect = menu.getBoundingClientRect();
+  const viewportHeight = window.innerHeight;
+  if (menuRect.bottom > viewportHeight) {
+    let newTop = viewportHeight - menuRect.height;
+    if (newTop < 0) newTop = 0;
+    menu.style.top = newTop + "px";
+  }
 }
 
 function hideFileContextMenu() {
@@ -1484,7 +1493,7 @@ function fileListContextMenuHandler(e) {
     });
   }
   
-  showFileContextMenu(e.pageX, e.pageY, menuItems);
+  showFileContextMenu(e.clientX, e.clientY, menuItems);
 }
 
 // Bind the context menu to the file list container.