From 5082142b36a8b3ed6f2c2ee2d3fee9f15b1d1e5a Mon Sep 17 00:00:00 2001
From: barnabasmolnar <barnabas@excalidraw.com>
Date: Mon, 7 Aug 2023 14:55:50 +0200
Subject: [PATCH] Potentially improve main menu positioning.

---
 src/components/dropdownMenu/DropdownMenu.scss       | 2 +-
 src/components/dropdownMenu/DropdownMenuContent.tsx | 5 +++++
 src/components/main-menu/MainMenu.tsx               | 9 +++++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/dropdownMenu/DropdownMenu.scss b/src/components/dropdownMenu/DropdownMenu.scss
index 3a2c1651f..c24876b22 100644
--- a/src/components/dropdownMenu/DropdownMenu.scss
+++ b/src/components/dropdownMenu/DropdownMenu.scss
@@ -46,7 +46,7 @@
 
     .dropdown-menu-container {
       background-color: #fff !important;
-      max-height: calc(100vh - 150px);
+      max-height: var(--radix-popper-available-height);
       overflow-y: auto;
       --gap: 2;
     }
diff --git a/src/components/dropdownMenu/DropdownMenuContent.tsx b/src/components/dropdownMenu/DropdownMenuContent.tsx
index 265139a05..95ff3ac00 100644
--- a/src/components/dropdownMenu/DropdownMenuContent.tsx
+++ b/src/components/dropdownMenu/DropdownMenuContent.tsx
@@ -16,6 +16,7 @@ const MenuContent = ({
   style,
   sideOffset = 4,
   align = "start",
+  collisionPadding,
 }: {
   children?: React.ReactNode;
   onClickOutside?: () => void;
@@ -27,6 +28,9 @@ const MenuContent = ({
   style?: React.CSSProperties;
   sideOffset?: number;
   align?: "start" | "center" | "end";
+  collisionPadding?:
+    | number
+    | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
 }) => {
   const device = useDevice();
   const menuRef = useRef<HTMLDivElement>(null);
@@ -49,6 +53,7 @@ const MenuContent = ({
         side="bottom"
         sideOffset={sideOffset}
         align={align}
+        collisionPadding={collisionPadding}
       >
         {/* the zIndex ensures this menu has higher stacking order,
     see https://github.com/excalidraw/excalidraw/pull/1445 */}
diff --git a/src/components/main-menu/MainMenu.tsx b/src/components/main-menu/MainMenu.tsx
index 825534fa5..e0acbfb75 100644
--- a/src/components/main-menu/MainMenu.tsx
+++ b/src/components/main-menu/MainMenu.tsx
@@ -68,6 +68,15 @@ const MainMenu = Object.assign(
               onSelect={composeEventHandlers(onSelect, () => {
                 setAppState({ openMenu: null });
               })}
+              collisionPadding={
+                // accounting for
+                // - editor footer on desktop
+                // - toolbar on mobile
+                // we probably don't want the menu to overlay these elements
+                !device.isMobile
+                  ? { bottom: 90, top: 10 }
+                  : { top: 90, bottom: 10 }
+              }
             >
               {children}
               {device.isMobile && appState.collaborators.size > 0 && (