fix(submenu): ensure submenu has expected width in Safari

Fixes issue where a MenuItem within a submenu with overflow would get cut off and render with a scroll bar. fix #7112
Sage · Dec 16, 2024 · 6270f5d · 6270f5d
1 parent d1a7d79
commit 6270f5d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/src/components/menu/__internal__/submenu/submenu.style.ts b/src/components/menu/__internal__/submenu/submenu.style.ts
@@ -59,6 +59,7 @@ const StyledSubmenuWrapper = styled.div<StyledSubmenuWrapperProps>`
     ${!inFullscreenView &&
     css`
       display: flex;
+      flex-direction: column;
     `}
   `}
 `;
@@ -88,6 +89,7 @@ const StyledSubmenu = styled.ul<StyledSubmenuProps>`
 
       ${submenuMaxWidth &&
       css`
+        width: max-content;
         max-width: ${submenuMaxWidth};
 
         &&& {

diff --git a/src/components/menu/menu-test.stories.tsx b/src/components/menu/menu-test.stories.tsx
@@ -267,6 +267,12 @@ export const LongLabelsStory = () => {
         <MenuItem>Child B</MenuItem>
         <MenuItem>Child C</MenuItem>
       </MenuItem>
+      <MenuItem submenu="Parent Menu C with overflow" submenuMaxWidth="350px">
+        <MenuItem width="unset" minWidth="max-content" maxWidth="300px">
+          Child with a very long label that should wrap onto the next line and
+          not get cut off
+        </MenuItem>
+      </MenuItem>
     </Menu>
   );
 };