Web: Fixed settings article

packages/client/src/pages/PortalSettings/Layout/index.js

@@ -8,7 +8,7 @@ import withLoading from "SRC_DIR/HOCs/withLoading";
 //import commonIconsStyles from "@docspace/components/utils/common-icons-style";
 const ArticleSettings = React.memo(() => {
   return (
-    <Article>
+    <Article articleBodyclassName="article-settings_body">
       <Article.Header>
         <ArticleHeaderContent />
       </Article.Header>

packages/common/components/Article/index.js

@@ -37,6 +37,7 @@ const Article = ({
   isAvailableArticlePaymentAlert,
   currentColorScheme,
   setArticleOpen,
+  articleBodyclassName,
   ...rest
 }) => {
   const [articleHeaderContent, setArticleHeaderContent] = React.useState(null);
@@ -125,7 +126,7 @@ const Article = ({
             {articleMainButtonContent.props.children}
           </SubArticleMainButton>
         ) : null}
-        <SubArticleBody showText={showText}>
+        <SubArticleBody showText={showText} className={articleBodyclassName}>
           {articleBodyContent ? articleBodyContent.props.children : null}
           <HideArticleMenuButton
             showText={showText}

packages/common/components/Article/styled-article.js

@@ -105,6 +105,20 @@ const StyledArticle = styled.article`
       `}
     }
   }
+
+  .article-settings_body {
+    .scroll-body {
+      height: calc(100% - 150px);
+      @media ${mobile} {
+        height: calc(100% - 20px) !important;
+      }
+
+      ${isMobileOnly &&
+      css`
+        height: calc(100% - 20px) !important;
+      `}
+    }
+  }
 `;
 
 StyledArticle.defaultProps = { theme: Base };

packages/common/components/Article/sub-components/article-body.js

@@ -1,9 +1,13 @@
 import React from "react";
 import Scrollbar from "@docspace/components/scrollbar";
+import { classNames } from "@docspace/components/utils/classNames";
 
-const ArticleBody = ({ children }) => {
+const ArticleBody = ({ children, className }) => {
   return (
-    <Scrollbar className="article-body__scrollbar" stype="mediumBlack">
+    <Scrollbar
+      className={classNames(className, "article-body__scrollbar")}
+      stype="mediumBlack"
+    >
       {children}
     </Scrollbar>
   );