From dc3f38f67d5bc4a00f3776e91e57a8174f39d521 Mon Sep 17 00:00:00 2001
From: 01zulfi <85733202+01zulfi@users.noreply.github.com>
Date: Mon, 17 Aug 2026 10:11:17 +0500
Subject: [PATCH] ui: truncate long menu titles (#10237)

* On web, long tags in menu items in the editor header would take a lot of width. The fix in the ui package will fix it for all usages of long menu items on web

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>
---
 packages/ui/src/components/menu/index.tsx       |  1 +
 packages/ui/src/components/menu/menu-button.tsx | 14 +++++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/menu/index.tsx b/packages/ui/src/components/menu/index.tsx
index e25b4a673..ca3a5b83e 100644
--- a/packages/ui/src/components/menu/index.tsx
+++ b/packages/ui/src/components/menu/index.tsx
@@ -204,6 +204,7 @@ function MenuContainer(props: PropsWithChildren<MenuContainerProps>) {
         boxShadow: "menu",
         border: "1px solid var(--border)",
         minWidth: 220,
+        maxWidth: "min(95vw, 350px)",
         maxHeight: "80vh",
         ...sx
       }}
diff --git a/packages/ui/src/components/menu/menu-button.tsx b/packages/ui/src/components/menu/menu-button.tsx
index 2250a1ef9..399aba0ec 100644
--- a/packages/ui/src/components/menu/menu-button.tsx
+++ b/packages/ui/src/components/menu/menu-button.tsx
@@ -62,7 +62,7 @@ export function MenuButton(props: MenuButtonProps) {
         ref={itemRef}
         tabIndex={-1}
         variant="menuitem"
-        title={tooltip}
+        title={tooltip || title}
         disabled={isDisabled}
         onClick={(e) => onClick?.(e.nativeEvent)}
         sx={{
@@ -73,7 +73,12 @@ export function MenuButton(props: MenuButtonProps) {
         }}
       >
         <Flex
-          sx={{ fontSize: "inherit", fontFamily: "inherit", flexShrink: 0 }}
+          sx={{
+            fontSize: "inherit",
+            fontFamily: "inherit",
+            minWidth: 0,
+            overflow: "hidden"
+          }}
         >
           <Icon
             path={icon || ""}
@@ -92,7 +97,10 @@ export function MenuButton(props: MenuButtonProps) {
               fontFamily: "inherit",
               color: variant === "dangerous" ? "paragraph-error" : "paragraph",
               textAlign: "left",
-              flexShrink: 0,
+              minWidth: 0,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
               ...styles?.title
             }}
           >