From 1a0505ab3831649cb9ee0940d405df844c7c7151 Mon Sep 17 00:00:00 2001
From: Frankie Yan <frankie@doist.com>
Date: Wed, 11 Dec 2024 23:39:01 -0800
Subject: [PATCH] fix: Prefer flipping submenu to left side over to the bottom

---
 src/menu/menu.stories.mdx | 2 +-
 src/menu/menu.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/menu/menu.stories.mdx b/src/menu/menu.stories.mdx
index 52ddd31ec..1f412402e 100644
--- a/src/menu/menu.stories.mdx
+++ b/src/menu/menu.stories.mdx
@@ -126,7 +126,7 @@ be changed by passing `modal={false}` to `<MenuList>`
 
 You may nest the `<SubMenu>` component within `<Menu>` to create submenus.
 
-On smaller viewports where there isn't enough space to render the submenu on the side, it will be rendered under its parent menu item instead.
+On smaller viewports where there isn't enough space to render the submenu on either side, it will be rendered under its parent menu item instead.
 
 <Canvas>
     <Story
diff --git a/src/menu/menu.tsx b/src/menu/menu.tsx
index f9b26287f..8394ff2b8 100644
--- a/src/menu/menu.tsx
+++ b/src/menu/menu.tsx
@@ -172,7 +172,7 @@ const MenuList = React.forwardRef<HTMLDivElement, MenuListProps>(function MenuLi
                 className={classNames('reactist_menulist', exceptionallySetClassName)}
                 getAnchorRect={getAnchorRect ?? undefined}
                 modal={modal}
-                flip={flip ?? (isSubMenu ? 'bottom' : undefined)}
+                flip={flip ?? (isSubMenu ? 'left bottom' : undefined)}
             />
         </Portal>
     ) : null