diff --git a/packages/components/submenu/index.js b/packages/components/submenu/index.js index 8ed6822b76..9d5624c7c1 100644 --- a/packages/components/submenu/index.js +++ b/packages/components/submenu/index.js @@ -21,7 +21,6 @@ const Submenu = (props) => { startSelect = 0, forsedActiveItemId, onSelect, - isFullLength, ...rest } = props; if (!data) return null; @@ -106,7 +105,7 @@ const Submenu = (props) => {
- + {data.map((d) => { const isActive = @@ -145,12 +144,9 @@ const Submenu = (props) => { ); })} - {!isFullLength && ( - - )} - {isFullLength && } +
diff --git a/packages/components/submenu/styled-submenu.js b/packages/components/submenu/styled-submenu.js index db4b268230..d5eda69d0d 100644 --- a/packages/components/submenu/styled-submenu.js +++ b/packages/components/submenu/styled-submenu.js @@ -22,6 +22,12 @@ export const StyledSubmenu = styled.div` top: 0; background: ${(props) => props.theme.submenu.backgroundColor}; z-index: 1; + ${(props) => + !props.isFullLength && + !isMobileOnly && + css` + width: fit-content; + `}; } ${isMobileOnly && @@ -128,13 +134,6 @@ export const SubmenuScroller = styled.div` } overflow-x: auto; overflow-y: hidden; - - ${(props) => - !props.isFullLength && - css` - display: grid; - flex: 0 1 auto; - `}; `; export const SubmenuRoot = styled.div`