Potentially improve main menu positioning.

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;
     }

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

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 && (