Web:Common:Article: change height for IOS devices and add padding-bottom

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

@@ -97,7 +97,6 @@ const StyledArticle = styled.article`
       height: calc(100vh - 64px) !important;
       margin: 0;
       padding: 0;
-      padding-bottom: 0px;
     }
 
     ${isMobile &&
@@ -114,16 +113,23 @@ const StyledArticle = styled.article`
       display: ${(props) => (props.articleOpen ? "flex" : "none")};
       min-width: 100vw !important;
       width: 100vw;
-      height: calc(100vh - 64px) !important;
       margin: 0;
       padding: 0;
-      padding-bottom: 0px;
     `}
   }
 
   .article-body__scrollbar {
     .scroll-body {
       padding-right: 0px !important;
+
+      @media ${mobile} {
+        padding-bottom: 20px;
+      }
+
+      ${isMobileOnly &&
+      css`
+        padding-bottom: 20px;
+      `}
     }
   }
 `;

web/ASC.Web.Client/src/components/Main/index.js

@@ -1,6 +1,12 @@
 import React from "react";
 import styled, { css } from "styled-components";
-import { isIOS, isFirefox, isMobile, isMobileOnly } from "react-device-detect";
+import {
+  isIOS,
+  isFirefox,
+  isSafari,
+  isMobile,
+  isMobileOnly,
+} from "react-device-detect";
 
 const StyledMain = styled.main`
   height: ${(props) =>
@@ -16,7 +22,12 @@ const StyledMain = styled.main`
   box-sizing: border-box;
 
   #article-container {
-    height: calc(100%) !important;
+    ${isMobileOnly &&
+    css`
+      height: ${isIOS && !isFirefox
+        ? "calc(var(--vh, 1vh) * 100 - 16px)"
+        : "100vh - 64px"} !important;
+    `}
   }
 
   ${isMobileOnly &&