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