) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/packages/excalidraw/components/InlineIcon.tsx b/packages/excalidraw/components/InlineIcon.tsx
index 75cc29d08d..c80045e5e8 100644
--- a/packages/excalidraw/components/InlineIcon.tsx
+++ b/packages/excalidraw/components/InlineIcon.tsx
@@ -7,6 +7,7 @@ export const InlineIcon = ({ icon }: { icon: React.ReactNode }) => {
display: "inline-block",
lineHeight: 0,
verticalAlign: "middle",
+ flex: "0 0 auto",
}}
>
{icon}
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss b/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss
index e48f6d71e7..95d258c46b 100644
--- a/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenu.scss
@@ -19,6 +19,8 @@
border-radius: var(--border-radius-lg);
position: relative;
transition: box-shadow 0.5s ease-in-out;
+ display: flex;
+ flex-direction: column;
&.zen-mode {
box-shadow: none;
@@ -100,6 +102,7 @@
align-items: center;
cursor: pointer;
border-radius: var(--border-radius-md);
+ flex: 1 0 auto;
@media screen and (min-width: 1921px) {
height: 2.25rem;
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx
index b2f9e7e0a9..aea13230b8 100644
--- a/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx
@@ -1,5 +1,7 @@
import { useDevice } from "../App";
+import { Ellipsify } from "../Ellipsify";
+
import type { JSX } from "react";
const MenuItemContent = ({
@@ -18,7 +20,7 @@ const MenuItemContent = ({
<>
{icon && {icon}
}
- {children}
+ {children}
{shortcut && !device.editor.isMobile && (
{shortcut}
diff --git a/packages/excalidraw/index.tsx b/packages/excalidraw/index.tsx
index 478ecc42f0..a592e2ea91 100644
--- a/packages/excalidraw/index.tsx
+++ b/packages/excalidraw/index.tsx
@@ -281,6 +281,7 @@ export { Sidebar } from "./components/Sidebar/Sidebar";
export { Button } from "./components/Button";
export { Footer };
export { MainMenu };
+export { Ellipsify } from "./components/Ellipsify";
export { useDevice } from "./components/App";
export { WelcomeScreen };
export { LiveCollaborationTrigger };
diff --git a/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap
index bb87746c0d..ae4728e0c7 100644
--- a/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap
@@ -15,7 +15,11 @@ exports[` > > should render main menu with host menu it
> > should render main menu with host menu it
> > should render main menu with host menu it
> Test UIOptions prop > Test canvasActions > should rende
> Test UIOptions prop > Test canvasActions > should rende
> Test UIOptions prop > Test canvasActions > should rende
> Test UIOptions prop > Test canvasActions > should rende
> Test UIOptions prop > Test canvasActions > should rende
> Test UIOptions prop > Test canvasActions > should rende
> Test UIOptions prop > Test canvasActions > should rende
> Test UIOptions prop > Test canvasActions > should rende
> Test UIOptions prop > Test canvasActions > should rende
@@ -542,7 +590,11 @@ exports[` > Test UIOptions prop > Test canvasActions > should rende