Web:Components:Fix BottomLine.

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) => {
       <div className="sticky">
         <SubmenuRoot>
           <SubmenuScrollbarSize />
-          <SubmenuScroller isFullLength={isFullLength}>
+          <SubmenuScroller>
             <StyledSubmenuItems ref={submenuItemsRef} role="list">
               {data.map((d) => {
                 const isActive =
@@ -145,12 +144,9 @@ const Submenu = (props) => {
                 );
               })}
             </StyledSubmenuItems>
-            {!isFullLength && (
-              <StyledSubmenuBottomLine className="bottom-line" />
-            )}
           </SubmenuScroller>
         </SubmenuRoot>
-        {isFullLength && <StyledSubmenuBottomLine className="bottom-line" />}
+        <StyledSubmenuBottomLine className="bottom-line" />
       </div>
       <div className="sticky-indent"></div>
 

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`