From 76024341f875b3265ef2dc2f322843e1ec1d0351 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Wed, 3 Dec 2025 15:28:58 +0000
Subject: [PATCH] Merge pull request #30058 from
 overleaf/dp-offscreen-context-menu

Add override for upwards dropdowns in file tree context menu

GitOrigin-RevId: 34f69f884eb0b942cb0462ab071c5dcaad8fad16
---
 .../components/file-tree-context-menu.tsx     | 21 ++++++++++++-------
 .../stylesheets/pages/editor/file-tree.scss   |  5 +++++
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-context-menu.tsx b/services/web/frontend/js/features/file-tree/components/file-tree-context-menu.tsx
index 83288031c8..5b38affd14 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-context-menu.tsx
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-context-menu.tsx
@@ -8,6 +8,7 @@ import { useFileTreeData } from '@/shared/context/file-tree-data-context'
 import { useFileTreeMainContext } from '../contexts/file-tree-main'
 
 import FileTreeItemMenuItems from './file-tree-item/file-tree-item-menu-items'
+import classNames from 'classnames'
 
 function FileTreeContextMenu() {
   const { fileTreeReadOnly } = useFileTreeData()
@@ -76,21 +77,27 @@ function FileTreeContextMenu() {
 
   if (!contextMenuCoords || fileTreeReadOnly) return null
 
+  const dropDirection =
+    document.body.offsetHeight / contextMenuCoords.top < 2 &&
+    document.body.offsetHeight - contextMenuCoords.top < 250
+      ? 'up'
+      : 'down'
+
   return ReactDOM.createPortal(
     <div style={contextMenuCoords} className="context-menu">
       <Dropdown
         show
-        drop={
-          document.body.offsetHeight / contextMenuCoords.top < 2 &&
-          document.body.offsetHeight - contextMenuCoords.top < 250
-            ? 'up'
-            : 'down'
-        }
+        drop={dropDirection}
         onKeyDown={handleClose}
         onToggle={handleToggle}
       >
         <DropdownMenu
-          className="dropdown-menu-sm-width"
+          className={classNames('dropdown-menu-sm-width', {
+            // We have to manually add a class to handle upwards context menu styling
+            // due to the way that this dropdown is positioned with absolute coordinates and
+            // not relative to a toggle
+            'context-menu-upwards': dropDirection === 'up',
+          })}
           id="dropdown-file-tree-context-menu"
         >
           <FileTreeItemMenuItems />
diff --git a/services/web/frontend/stylesheets/pages/editor/file-tree.scss b/services/web/frontend/stylesheets/pages/editor/file-tree.scss
index a2d57dfe20..cbdfb9f6c7 100644
--- a/services/web/frontend/stylesheets/pages/editor/file-tree.scss
+++ b/services/web/frontend/stylesheets/pages/editor/file-tree.scss
@@ -210,6 +210,11 @@
   z-index: 100;
 }
 
+.context-menu-upwards {
+  top: auto;
+  bottom: 100%;
+}
+
 .editor-sidebar {
   background-color: var(--file-tree-bg);
   display: flex;