diff --git a/apps/vr-tests-react-components/src/stories/Menu/MenuItemSelectableWIthLongText.stories.tsx b/apps/vr-tests-react-components/src/stories/Menu/MenuItemSelectableWIthLongText.stories.tsx
new file mode 100644
index 0000000000000..e291b6ebd88b2
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Menu/MenuItemSelectableWIthLongText.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItemCheckbox, MenuItem } from '@fluentui/react-menu';
+import { StoryWright } from 'storywright';
+import { CutRegular, CutFilled, bundleIcon } from '@fluentui/react-icons';
+
+const CutIcon = bundleIcon(CutFilled, CutRegular);
+
+export default {
+ title: 'Menu Converged - selection',
+ decorators: [story => {story()}],
+} satisfies Meta;
+
+export const SelectableWithLongText = () => (
+
+);
+
+SelectableWithLongText.storyName = 'selectable with long text';
diff --git a/change/@fluentui-react-menu-738a350f-94f7-49f4-a55a-6f5f807cf659.json b/change/@fluentui-react-menu-738a350f-94f7-49f4-a55a-6f5f807cf659.json
new file mode 100644
index 0000000000000..28a7c5618b048
--- /dev/null
+++ b/change/@fluentui-react-menu-738a350f-94f7-49f4-a55a-6f5f807cf659.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "fix: Align menu item long content with icon slots",
+ "packageName": "@fluentui/react-menu",
+ "email": "lingfangao@hotmail.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts
index af700a3ec7801..66310cecf70d9 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItemStyles.styles.ts
@@ -98,6 +98,7 @@ const useIconBaseStyles = makeResetStyles({
alignItems: 'center',
display: 'inline-flex',
justifyContent: 'center',
+ flexShrink: 0,
});
const useSubmenuIndicatorBaseStyles = makeResetStyles({
diff --git a/packages/react-components/react-menu/library/src/selectable/useCheckmarkStyles.styles.ts b/packages/react-components/react-menu/library/src/selectable/useCheckmarkStyles.styles.ts
index 3c5b98a6690fc..5652e2c1bec14 100644
--- a/packages/react-components/react-menu/library/src/selectable/useCheckmarkStyles.styles.ts
+++ b/packages/react-components/react-menu/library/src/selectable/useCheckmarkStyles.styles.ts
@@ -7,9 +7,11 @@ const useStyles = makeStyles({
width: '16px',
height: '16px',
visibility: 'hidden',
+ flexShrink: 0,
},
rootChecked: {
visibility: 'visible',
+ flexShrink: 0,
},
});