Web: Common: Fixed scrolling of article on small tablet and mobile, fixed margin top of unpin article.

web/ASC.Web.Common/src/components/Layout/index.js

@@ -18,7 +18,7 @@ import store from "../../store";
 const { setIsTabletView } = store.auth.actions;
 const { getIsTabletView, isArticlePinned } = store.auth.selectors;
 
-const { size } = utils.device;
+const { size, isSmallTablet } = utils.device;
 
 const StyledContainer = styled.div`
   width: 100%;
@@ -49,14 +49,21 @@ const StyledContainer = styled.div`
 
   #articleScrollBar {
     > .scroll-body {
-      position: ${isMobile ? "static" : "absolute"} !important;
+      position: ${(props) =>
+        isMobile && !isSmallTablet()
+          ? props.isArticlePinned
+            ? "static"
+            : "absolute"
+          : "absolute"} !important;
 
       ${(props) =>
         isMobile &&
         props.isArticlePinned &&
+        !isSmallTablet() &&
         css`
           overflow-y: hidden !important;
           overflow-x: hidden !important;
+          width: 208px;
           /* max-width: calc(100vw - 576px);
           min-width: 208px; */
         `}/* > div:first-child {
@@ -80,7 +87,7 @@ const StyledContainer = styled.div`
 `;
 
 const Layout = (props) => {
-  const { children, isTabletView, setIsTabletView } = props;
+  const { children, isTabletView, setIsTabletView, isArticlePinned } = props;
 
   const [contentHeight, setContentHeight] = useState();
   const [isPortrait, setIsPortrait] = useState();

web/ASC.Web.Common/src/components/PageLayout/sub-components/article.js

@@ -34,7 +34,7 @@ const StyledArticle = styled.article`
     }
     ${isMobile &&
     css`
-      margin-top: 56px;
+      margin-top: ${(props) => (props.pinned ? "56px;" : "0;")}
       height: calc(100% - 56px) !important;
       width: 240px !important;
     `}