From 8ff1ac809737e64a4218c058c4774dd574d2b891 Mon Sep 17 00:00:00 2001
From: barnabasmolnar <barnabas@excalidraw.com>
Date: Tue, 25 Jul 2023 13:52:32 +0200
Subject: [PATCH] Tweak dropdown alignment.

---
 src/components/Actions.tsx                          | 1 +
 src/components/LibraryMenuHeaderContent.tsx         | 1 +
 src/components/dropdownMenu/DropdownMenuContent.tsx | 8 +++++---
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Actions.tsx b/src/components/Actions.tsx
index 86381572f..f202e9c5e 100644
--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@@ -363,6 +363,7 @@ export const ShapesSwitcher = ({
             onClickOutside={() => setIsExtraToolsMenuOpen(false)}
             onSelect={() => setIsExtraToolsMenuOpen(false)}
             className="App-toolbar__extra-tools-dropdown"
+            align="end"
           >
             <DropdownMenu.Item
               onSelect={() => {
diff --git a/src/components/LibraryMenuHeaderContent.tsx b/src/components/LibraryMenuHeaderContent.tsx
index dffdb9013..62445eb0d 100644
--- a/src/components/LibraryMenuHeaderContent.tsx
+++ b/src/components/LibraryMenuHeaderContent.tsx
@@ -199,6 +199,7 @@ export const LibraryDropdownMenuButton: React.FC<{
           onClickOutside={() => setIsLibraryMenuOpen(false)}
           onSelect={() => setIsLibraryMenuOpen(false)}
           className="library-menu"
+          align="end"
         >
           {!itemsSelected && (
             <DropdownMenu.Item
diff --git a/src/components/dropdownMenu/DropdownMenuContent.tsx b/src/components/dropdownMenu/DropdownMenuContent.tsx
index f272ab729..31f192d9e 100644
--- a/src/components/dropdownMenu/DropdownMenuContent.tsx
+++ b/src/components/dropdownMenu/DropdownMenuContent.tsx
@@ -14,7 +14,8 @@ const MenuContent = ({
   className = "",
   onSelect,
   style,
-  sideOffset,
+  sideOffset = 4,
+  align = "start",
 }: {
   children?: React.ReactNode;
   onClickOutside?: () => void;
@@ -25,6 +26,7 @@ const MenuContent = ({
   onSelect?: (event: Event) => void;
   style?: React.CSSProperties;
   sideOffset?: number;
+  align?: "start" | "center" | "end";
 }) => {
   const device = useDevice();
   const menuRef = useRef<HTMLDivElement>(null);
@@ -45,8 +47,8 @@ const MenuContent = ({
         style={style}
         data-testid="dropdown-menu"
         side="bottom"
-        sideOffset={sideOffset ?? 4}
-        align="start"
+        sideOffset={sideOffset}
+        align={align}
       >
         {/* the zIndex ensures this menu has higher stacking order,
     see https://github.com/excalidraw/excalidraw/pull/1445 */}