Styling fixes, naming.

src/components/dropdownMenu/DropdownMenu.scss

@@ -1,10 +1,12 @@
 @import "../../css/variables.module";
 
 .excalidraw {
+  [data-radix-popper-content-wrapper] {
+    z-index: 1 !important;
+  }
+
   .dropdown-menu {
     position: absolute;
-    top: 100%;
-    margin-top: 0.25rem;
 
     &--mobile {
       bottom: 55px;

src/components/dropdownMenu/DropdownMenu.tsx

@@ -13,7 +13,7 @@ import {
 
 import "./DropdownMenu.scss";
 
-import * as DropdownMenuRadix from "@radix-ui/react-dropdown-menu";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 
 const DropdownMenu = ({
   children,
@@ -25,10 +25,10 @@ const DropdownMenu = ({
   const MenuTriggerComp = getMenuTriggerComponent(children);
   const MenuContentComp = getMenuContentComponent(children);
   return (
-    <DropdownMenuRadix.Root open={open}>
+    <DropdownMenuPrimitive.Root open={open}>
       {MenuTriggerComp}
       {open && MenuContentComp}
-    </DropdownMenuRadix.Root>
+    </DropdownMenuPrimitive.Root>
   );
 };
 

src/components/dropdownMenu/DropdownMenuContent.tsx

@@ -7,7 +7,7 @@ import Stack from "../Stack";
 import React from "react";
 import { DropdownMenuContentPropsContext } from "./common";
 
-import * as DropdownMenuRadix from "@radix-ui/react-dropdown-menu";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 
 const MenuContent = ({
   children,
@@ -36,11 +36,14 @@ const MenuContent = ({
 
   return (
     <DropdownMenuContentPropsContext.Provider value={{ onSelect }}>
-      <DropdownMenuRadix.Content
+      <DropdownMenuPrimitive.Content
         ref={menuRef}
         className={classNames}
         style={style}
         data-testid="dropdown-menu"
+        side="bottom"
+        sideOffset={4}
+        align="start"
       >
         {/* the zIndex ensures this menu has higher stacking order,
     see https://github.com/excalidraw/excalidraw/pull/1445 */}
@@ -55,7 +58,7 @@ const MenuContent = ({
             {children}
           </Island>
         )}
-      </DropdownMenuRadix.Content>
+      </DropdownMenuPrimitive.Content>
     </DropdownMenuContentPropsContext.Provider>
   );
 };

src/components/dropdownMenu/DropdownMenuTrigger.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { useDevice, useExcalidrawAppState } from "../App";
-import * as DropdownMenuRadix from "@radix-ui/react-dropdown-menu";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 
 const MenuTrigger = ({
   className = "",
@@ -22,7 +22,7 @@ const MenuTrigger = ({
     },
   ).trim();
   return (
-    <DropdownMenuRadix.Trigger
+    <DropdownMenuPrimitive.Trigger
       data-prevent-outside-click
       className={classNames}
       onClick={onToggle}
@@ -30,7 +30,7 @@ const MenuTrigger = ({
       data-testid="dropdown-menu-button"
     >
       {children}
-    </DropdownMenuRadix.Trigger>
+    </DropdownMenuPrimitive.Trigger>
   );
 };