Web: Common: fixed floating button styles when article is visible

packages/asc-web-common/components/PageLayout/index.js

@@ -335,6 +335,7 @@ class PageLayout extends React.Component {
                     widthProp={width}
                     unpinArticle={this.unpinArticle}
                     pinned={isArticlePinned}
+                    visible={isArticleVisible}
                   >
                     {isSectionHeaderAvailable && (
                       <SubSectionHeader

packages/asc-web-common/components/PageLayout/sub-components/section.js

@@ -31,9 +31,13 @@ const StyledSection = styled.section`
     right: 15px;
     bottom: 21px;
 
-    @media ${tablet} {
-      bottom: 83px;
-    }
+    ${(props) =>
+      !props.visible &&
+      css`
+        @media ${tablet} {
+          bottom: 83px;
+        }
+      `}
   }
 
   .layout-progress-second-bar {
@@ -41,9 +45,13 @@ const StyledSection = styled.section`
     right: 15px;
     bottom: 83px;
 
-    @media ${tablet} {
-      bottom: 145px;
-    }
+    ${(props) =>
+      !props.visible &&
+      css`
+        @media ${tablet} {
+          bottom: 145px;
+        }
+      `}
   }
 
   .section-header_filter {
@@ -57,13 +65,11 @@ const StyledSection = styled.section`
     padding: 0 0 0 16px;
     ${tabletProps};
   }
-  ${
-    isMobile &&
-    css`
-      ${tabletProps};
-      min-width: 100px;
-    `
-  }
+  ${isMobile &&
+  css`
+    ${tabletProps};
+    min-width: 100px;
+  `}
 `;
 
 class Section extends React.Component {