Merge pull request #30058 from overleaf/dp-offscreen-context-menu

Add override for upwards dropdowns in file tree context menu

GitOrigin-RevId: 34f69f884eb0b942cb0462ab071c5dcaad8fad16

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 />

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;