From 9c3ff73a7378e0cdaa110144cb61ff5bf7115f95 Mon Sep 17 00:00:00 2001
From: barnabasmolnar <barnabas@excalidraw.com>
Date: Mon, 17 Apr 2023 17:31:50 +0200
Subject: [PATCH] Styling fixes, naming.

---
 src/components/dropdownMenu/DropdownMenu.scss       | 6 ++++--
 src/components/dropdownMenu/DropdownMenu.tsx        | 6 +++---
 src/components/dropdownMenu/DropdownMenuContent.tsx | 9 ++++++---
 src/components/dropdownMenu/DropdownMenuTrigger.tsx | 6 +++---
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/dropdownMenu/DropdownMenu.scss b/src/components/dropdownMenu/DropdownMenu.scss
index ff94f4920..c8448a7fd 100644
--- a/src/components/dropdownMenu/DropdownMenu.scss
+++ b/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;
diff --git a/src/components/dropdownMenu/DropdownMenu.tsx b/src/components/dropdownMenu/DropdownMenu.tsx
index 08f08f81d..08cde9a96 100644
--- a/src/components/dropdownMenu/DropdownMenu.tsx
+++ b/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>
   );
 };
 
diff --git a/src/components/dropdownMenu/DropdownMenuContent.tsx b/src/components/dropdownMenu/DropdownMenuContent.tsx
index 38b335ad3..1450f2362 100644
--- a/src/components/dropdownMenu/DropdownMenuContent.tsx
+++ b/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>
   );
 };
diff --git a/src/components/dropdownMenu/DropdownMenuTrigger.tsx b/src/components/dropdownMenu/DropdownMenuTrigger.tsx
index ead9596d2..c7b547e68 100644
--- a/src/components/dropdownMenu/DropdownMenuTrigger.tsx
+++ b/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>
   );
 };