Bunch of radix related fixes.

src/components/ColorPicker.tsx

@@ -369,6 +369,16 @@ export const ColorPicker = ({
 }) => {
   const pickerButton = React.useRef<HTMLButtonElement>(null);
   const coords = pickerButton.current?.getBoundingClientRect();
+  const mainmenuContentCoords = document
+    .querySelector(".mainmenu-content")
+    ?.getBoundingClientRect();
+
+  const top =
+    coords && mainmenuContentCoords && coords.top - mainmenuContentCoords.top;
+  const left =
+    coords &&
+    mainmenuContentCoords &&
+    coords.right - mainmenuContentCoords.left;
 
   return (
     <div>
@@ -396,8 +406,8 @@ export const ColorPicker = ({
             className="color-picker-popover-container"
             style={{
               position: "fixed",
-              top: coords?.top,
+              top,
-              left: coords?.right,
+              left,
               zIndex: 1,
             }}
           >

src/components/dropdownMenu/DropdownMenu.scss

@@ -6,7 +6,8 @@
   }
 
   .dropdown-menu {
-    position: absolute;
+    // position: absolute;
+    max-width: 250px;
 
     .radix-menuitem {
       &:focus-visible {
@@ -15,15 +16,16 @@
     }
 
     &--mobile {
-      bottom: 55px;
+      max-width: none;
-      top: auto;
+      // bottom: 55px;
-      left: 0;
+      // top: auto;
-      // TODO barnabasmolnar/mainmenu-radix
+      // left: 0;
-      // double check rendering/styling on mobile
+      // // TODO barnabasmolnar/mainmenu-radix
-      // width: 100%;
+      // // double check rendering/styling on mobile
-      display: flex;
+      // // width: 100%;
-      flex-direction: column;
+      // display: flex;
-      row-gap: 0.75rem;
+      // flex-direction: column;
+      // row-gap: 0.75rem;
 
       .dropdown-menu-container {
         padding: 8px 8px;

src/components/dropdownMenu/DropdownMenu.tsx

@@ -26,7 +26,7 @@ const DropdownMenu = ({
   const MenuContentComp = getMenuContentComponent(children);
 
   return (
-    <DropdownMenuPrimitive.Root open={open}>
+    <DropdownMenuPrimitive.Root open={open} modal={false}>
       {MenuTriggerComp}
       {MenuContentComp}
     </DropdownMenuPrimitive.Root>

src/components/dropdownMenu/DropdownMenuContent.tsx

@@ -15,6 +15,7 @@ const MenuContent = ({
   className = "",
   onSelect,
   style,
+  sideOffset,
 }: {
   children?: React.ReactNode;
   onClickOutside?: () => void;
@@ -24,6 +25,7 @@ const MenuContent = ({
    */
   onSelect?: (event: Event) => void;
   style?: React.CSSProperties;
+  sideOffset?: number;
 }) => {
   const device = useDevice();
   const menuRef = useOutsideClickHook(() => {
@@ -42,7 +44,7 @@ const MenuContent = ({
         style={style}
         data-testid="dropdown-menu"
         side="bottom"
-        sideOffset={4}
+        sideOffset={sideOffset ?? 4}
         align="start"
       >
         {/* the zIndex ensures this menu has higher stacking order,

src/components/main-menu/MainMenu.tsx

@@ -50,6 +50,8 @@ const MainMenu = Object.assign(
               {HamburgerMenuIcon}
             </DropdownMenu.Trigger>
             <DropdownMenu.Content
+              sideOffset={device.isMobile ? 20 : undefined}
+              className="mainmenu-content"
               onClickOutside={onClickOutside}
               onSelect={composeEventHandlers(onSelect, () => {
                 setAppState({ openMenu: null });

src/packages/excalidraw/example/App.tsx

@@ -526,7 +526,7 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
               </svg>
             }
           >
-            Trigger
+            Submenu trigger
           </MainMenu.Sub.Trigger>
           <MainMenu.Sub.Content>
             <MainMenu.Sub.Item
@@ -574,7 +574,7 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
         </MainMenu.Group>
         {/* <MainMenu.Separator /> */}
         <MainMenu.Sub>
-          <MainMenu.Sub.Trigger>Trigger</MainMenu.Sub.Trigger>
+          <MainMenu.Sub.Trigger>Another submenu trigger</MainMenu.Sub.Trigger>
           <MainMenu.Sub.Content>
             <MainMenu.Sub.Item
               onSelect={() => window.alert("You clicked on sub item")}