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

@@ -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
       }}

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
             }}
           >