Web:Change isFullLength to scale.

packages/client/src/pages/Home/InfoPanel/Header/index.js

@@ -126,14 +126,14 @@ const InfoPanelHeaderContent = (props) => {
               style={{ width: "100%" }}
               data={roomsSubmenu}
               forsedActiveItemId={roomsView}
-              isFullLength={true}
+              scale={true}
             />
           ) : (
             <Submenu
               style={{ width: "100%" }}
               data={personalSubmenu}
               forsedActiveItemId={fileView}
-              isFullLength={true}
+              scale={true}
             />
           )}
         </div>

packages/components/submenu/index.js

@@ -21,6 +21,7 @@ const Submenu = (props) => {
     startSelect = 0,
     forsedActiveItemId,
     onSelect,
+    scale,
     ...rest
   } = props;
   if (!data) return null;
@@ -105,7 +106,7 @@ const Submenu = (props) => {
       <div className="sticky">
         <SubmenuRoot>
           <SubmenuScrollbarSize />
-          <SubmenuScroller>
+          <SubmenuScroller scale={scale}>
             <StyledSubmenuItems ref={submenuItemsRef} role="list">
               {data.map((d) => {
                 const isActive =
@@ -144,9 +145,10 @@ const Submenu = (props) => {
                 );
               })}
             </StyledSubmenuItems>
+            {!scale && <StyledSubmenuBottomLine className="bottom-line" />}
           </SubmenuScroller>
         </SubmenuRoot>
-        <StyledSubmenuBottomLine className="bottom-line" />
+        {scale && <StyledSubmenuBottomLine className="bottom-line" />}
       </div>
       <div className="sticky-indent"></div>
 
@@ -164,8 +166,8 @@ Submenu.propTypes = {
   startSelect: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
   /** Property that allows explicitly selecting content passed through an external operation  */
   forsedActiveItemId: PropTypes.any,
-  /** Property means whether a full width of the bottom line is used. */
-  isFullLength: PropTypes.bool,
+  /** Scales the width of the bottom line to 100%.  */
+  scale: PropTypes.bool,
   /** Sets a callback function that is triggered when the submenu item is selected */
   onSelect: PropTypes.func,
 };

packages/components/submenu/styled-submenu.js

@@ -22,11 +22,6 @@ export const StyledSubmenu = styled.div`
     top: 0;
     background: ${(props) => props.theme.submenu.backgroundColor};
     z-index: 1;
-    ${(props) =>
-      !props.isFullLength &&
-      css`
-        max-width: fit-content;
-      `};
   }
 
   ${isMobileOnly &&
@@ -85,12 +80,12 @@ export const StyledSubmenuItem = styled.div.attrs((props) => ({
   ${(props) =>
     props.theme.interfaceDirection === "rtl"
       ? css`
+          margin-left: 17px;
+        `
+      : css`
           &:not(:last-child) {
             margin-right: 17px;
           }
-        `
-      : css`
-          margin-right: 17px;
         `}
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 `;
@@ -133,6 +128,13 @@ export const SubmenuScroller = styled.div`
   }
   overflow-x: auto;
   overflow-y: hidden;
+
+  ${(props) =>
+    !props.scale &&
+    css`
+      display: grid;
+      flex: 0 1 auto;
+    `}
 `;
 
 export const SubmenuRoot = styled.div`