From 545dacc8ca3a2b38ff45581b1bddcae01565fc82 Mon Sep 17 00:00:00 2001
From: TatianaLopaeva <talopaeva@gmail.com>
Date: Fri, 22 Jan 2021 16:50:20 +0300
Subject: [PATCH] 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   | 13 ++++++++++---
 .../components/PageLayout/sub-components/article.js |  2 +-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/ASC.Web.Common/src/components/Layout/index.js b/web/ASC.Web.Common/src/components/Layout/index.js
index 96ed2f3070..15d876a019 100644
--- a/web/ASC.Web.Common/src/components/Layout/index.js
+++ b/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();
diff --git a/web/ASC.Web.Common/src/components/PageLayout/sub-components/article.js b/web/ASC.Web.Common/src/components/PageLayout/sub-components/article.js
index d8576d12ea..094506e5f9 100644
--- a/web/ASC.Web.Common/src/components/PageLayout/sub-components/article.js
+++ b/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;
     `}