Revert "Make main menu full width on mobile again."

This reverts commit 70d48d547207d0cd611ea2683731fe7676a1a0fc.

src/components/dropdownMenu/DropdownMenu.scss

@@ -3,11 +3,6 @@
 .excalidraw {
   [data-radix-popper-content-wrapper] {
     z-index: 1 !important;
-
-    @include isMobile {
-      width: 100%;
-      max-width: var(--radix-popper-available-width);
-    }
   }
 
   .dropdown-menu {
@@ -35,6 +30,15 @@
 
     &--mobile {
       max-width: none;
+      // bottom: 55px;
+      // top: auto;
+      // left: 0;
+      // // TODO barnabasmolnar/mainmenu-radix
+      // // double check rendering/styling on mobile
+      // // width: 100%;
+      // display: flex;
+      // flex-direction: column;
+      // row-gap: 0.75rem;
 
       .dropdown-menu-container {
         padding: 8px 8px;

src/components/dropdownMenu/DropdownMenuContent.tsx

@@ -16,7 +16,6 @@ const MenuContent = ({
   onSelect,
   style,
   sideOffset,
-  collisionBoundary,
 }: {
   children?: React.ReactNode;
   onClickOutside?: () => void;
@@ -27,7 +26,6 @@ const MenuContent = ({
   onSelect?: (event: Event) => void;
   style?: React.CSSProperties;
   sideOffset?: number;
-  collisionBoundary?: Element | Element[] | null | undefined;
 }) => {
   const device = useDevice();
   const menuRef = useOutsideClickHook(() => {
@@ -41,7 +39,6 @@ const MenuContent = ({
   return (
     <DropdownMenuContentPropsContext.Provider value={{ onSelect }}>
       <DropdownMenuPrimitive.Content
-        collisionBoundary={collisionBoundary}
         ref={menuRef}
         className={classNames}
         style={style}

src/components/dropdownMenu/DropdownMenuSubContent.tsx

@@ -7,11 +7,9 @@ import clsx from "clsx";
 const DropdownMenuSubContent = ({
   children,
   className,
-  sideOffset,
 }: {
   children?: React.ReactNode;
   className?: string;
-  sideOffset?: number;
 }) => {
   const device = useDevice();
 
@@ -20,10 +18,7 @@ const DropdownMenuSubContent = ({
   }).trim();
 
   return (
-    <DropdownMenuPrimitive.SubContent
+    <DropdownMenuPrimitive.SubContent className={classNames}>
-      className={classNames}
-      sideOffset={sideOffset}
-    >
       {device.isMobile ? (
         <Stack.Col className="dropdown-menu-container">{children}</Stack.Col>
       ) : (

src/components/main-menu/MainMenu.tsx

@@ -33,7 +33,9 @@ const MainMenu = Object.assign(
       const device = useDevice();
       const appState = useExcalidrawAppState();
       const setAppState = useExcalidrawSetAppState();
-      const onClickOutside = () => setAppState({ openMenu: null });
+      const onClickOutside = device.isMobile
+        ? undefined
+        : () => setAppState({ openMenu: null });
 
       return (
         <mainMenuTunnel.In>
@@ -48,11 +50,6 @@ const MainMenu = Object.assign(
               {HamburgerMenuIcon}
             </DropdownMenu.Trigger>
             <DropdownMenu.Content
-              collisionBoundary={
-                device.isMobile
-                  ? document.querySelector(".App-bottom-bar")
-                  : undefined
-              }
               sideOffset={device.isMobile ? 20 : undefined}
               className="mainmenu-content"
               onClickOutside={onClickOutside}

src/packages/excalidraw/example/App.tsx

@@ -587,8 +587,8 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
           </MainMenu.Sub.Content>
         </MainMenu.Sub>
         <MainMenu.Sub>
-          <MainMenu.Sub.Trigger>Trigger me with offset</MainMenu.Sub.Trigger>
+          <MainMenu.Sub.Trigger>Trigger me</MainMenu.Sub.Trigger>
-          <MainMenu.Sub.Content sideOffset={-80}>
+          <MainMenu.Sub.Content>
             <MainMenu.Sub>
               <MainMenu.Sub.Trigger>Trigger me inside</MainMenu.Sub.Trigger>
               <MainMenu.Sub.Content>