From aae5214cde680faf81d22f179730d2efd57be7a0 Mon Sep 17 00:00:00 2001
From: Krao Hasanee <kraohasanee@fourgebranding.com>
Date: Tue, 2 Jun 2026 15:15:54 -0400
Subject: [PATCH] fix: context menu via createPortal, renders at viewport
 coords

---
 src/components/FileBrowser.jsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/FileBrowser.jsx b/src/components/FileBrowser.jsx
index 7469e08..9fee7e1 100644
--- a/src/components/FileBrowser.jsx
+++ b/src/components/FileBrowser.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import LoadingButton from './LoadingButton';
 import SortTh from './SortTh';
 import { supabase } from '../lib/supabase';
@@ -310,10 +311,7 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
 
   const openCtxMenu = (e, entry, childPath) => {
     e.preventDefault(); e.stopPropagation();
-    const menuW = 180, menuH = 320;
-    const x = e.clientX + menuW > window.innerWidth ? window.innerWidth - menuW - 8 : e.clientX;
-    const y = e.clientY + menuH > window.innerHeight ? e.clientY - menuH : e.clientY;
-    setCtxMenu({ x: Math.max(4, x), y: Math.max(4, y), entry, childPath });
+    setCtxMenu({ x: e.clientX, y: e.clientY, entry, childPath });
   };
 
   return (
@@ -445,9 +443,9 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
         )}
       </div>
 
-      {/* Context menu */}
-      {ctxMenu && (
-        <div onClick={e => e.stopPropagation()} style={{ ...popupMenuStyle, position: 'fixed', left: ctxMenu.x, top: ctxMenu.y, zIndex: 1000, padding: '4px 0', minWidth: 160 }}>
+      {/* Context menu — portal to escape stacking context */}
+      {ctxMenu && createPortal(
+        <div onClick={e => e.stopPropagation()} style={{ ...popupMenuStyle, position: 'fixed', left: ctxMenu.x, top: ctxMenu.y, zIndex: 9999, padding: '4px 0', minWidth: 160 }}>
           {ctxMenu.entry?.type === 'dir' && (
             <button style={ITEM_STYLE} onMouseEnter={e => e.currentTarget.style.background = 'var(--interactive-row-hover)'} onMouseLeave={e => e.currentTarget.style.background = 'none'} onClick={() => { loadFiles(ctxMenu.childPath); setCtxMenu(null); }}>
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" /></svg>
@@ -514,7 +512,8 @@ export default function FileBrowser({ initialPath = '/', rootPath = '/' }) {
               </button>
             </>
           )}
-        </div>
+        </div>,
+        document.body
       )}
     </div>
   );