From b63d17045eaf68a925eb1afb297ea6304712679e Mon Sep 17 00:00:00 2001
From: barnabasmolnar <barnabas@excalidraw.com>
Date: Wed, 26 Apr 2023 12:52:35 +0200
Subject: [PATCH] Revert "Make main menu full width on mobile again."

This reverts commit 70d48d547207d0cd611ea2683731fe7676a1a0fc.
---
 src/components/dropdownMenu/DropdownMenu.scss      | 14 +++++++++-----
 .../dropdownMenu/DropdownMenuContent.tsx           |  3 ---
 .../dropdownMenu/DropdownMenuSubContent.tsx        |  7 +------
 src/components/main-menu/MainMenu.tsx              |  9 +++------
 src/packages/excalidraw/example/App.tsx            |  4 ++--
 5 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/components/dropdownMenu/DropdownMenu.scss b/src/components/dropdownMenu/DropdownMenu.scss
index 1a683ab42..cbdefa366 100644
--- a/src/components/dropdownMenu/DropdownMenu.scss
+++ b/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;
diff --git a/src/components/dropdownMenu/DropdownMenuContent.tsx b/src/components/dropdownMenu/DropdownMenuContent.tsx
index ceac898db..d60ddd97e 100644
--- a/src/components/dropdownMenu/DropdownMenuContent.tsx
+++ b/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}
diff --git a/src/components/dropdownMenu/DropdownMenuSubContent.tsx b/src/components/dropdownMenu/DropdownMenuSubContent.tsx
index 1760e6e5c..665933e9a 100644
--- a/src/components/dropdownMenu/DropdownMenuSubContent.tsx
+++ b/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
-      className={classNames}
-      sideOffset={sideOffset}
-    >
+    <DropdownMenuPrimitive.SubContent className={classNames}>
       {device.isMobile ? (
         <Stack.Col className="dropdown-menu-container">{children}</Stack.Col>
       ) : (
diff --git a/src/components/main-menu/MainMenu.tsx b/src/components/main-menu/MainMenu.tsx
index efad1ced3..d8ccf5856 100644
--- a/src/components/main-menu/MainMenu.tsx
+++ b/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}
diff --git a/src/packages/excalidraw/example/App.tsx b/src/packages/excalidraw/example/App.tsx
index 6c5e43978..24376aff6 100644
--- a/src/packages/excalidraw/example/App.tsx
+++ b/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.Content sideOffset={-80}>
+          <MainMenu.Sub.Trigger>Trigger me</MainMenu.Sub.Trigger>
+          <MainMenu.Sub.Content>
             <MainMenu.Sub>
               <MainMenu.Sub.Trigger>Trigger me inside</MainMenu.Sub.Trigger>
               <MainMenu.Sub.Content>