Web: Components: Aside: removed mobile IOS height fix

packages/components/aside/aside.js

@@ -1,6 +1,5 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import PropTypes from "prop-types";
-import { isMobile } from "react-device-detect";
 import Scrollbar from "../scrollbar";
 import {
   StyledAside,
@@ -20,36 +19,6 @@ const Aside = React.memo((props) => {
     onClose,
   } = props;
 
-  const [defaultAsideHeight, setDefaultAsideHeight] = useState(
-    window?.visualViewport?.height ?? null
-  );
-
-  const [asideHeight, setAsideHeight] = useState(
-    window?.visualViewport?.height ?? null
-  );
-  const [keyboardHeight, setKeyboardHeight] = useState(0);
-
-  const onOrientationChange = () => {
-    const viewportHeight = window?.visualViewport?.height;
-    const keyboardHeight =
-      defaultAsideHeight !== viewportHeight
-        ? defaultAsideHeight - viewportHeight
-        : 0;
-
-    setKeyboardHeight(keyboardHeight);
-    setAsideHeight(defaultAsideHeight - keyboardHeight);
-  };
-
-  useEffect(() => {
-    isMobile &&
-      window?.visualViewport?.addEventListener("resize", onOrientationChange);
-
-    return () => {
-      isMobile &&
-        window.removeEventListener("orientationchange", onOrientationChange);
-    };
-  });
-
   return (
     <StyledAside
       visible={visible}
@@ -57,8 +26,6 @@ const Aside = React.memo((props) => {
       zIndex={zIndex}
       contentPaddingBottom={contentPaddingBottom}
       className={`${className} not-selectable aside`}
-      asideHeight={asideHeight + "px"}
-      keyboardHeight={keyboardHeight}
     >
       {/* <CloseButton  displayType="aside" zIndex={zIndex}/> */}
       {withoutBodyScroll ? (

packages/components/aside/styled-aside.js

@@ -13,8 +13,6 @@ const Container = ({
   scale,
   zIndex,
   contentPaddingBottom,
-  asideHeight,
-  keyboardHeight,
   ...props
 }) => <aside {...props} />;
 /* eslint-enable react/prop-types */
@@ -22,10 +20,7 @@ const Container = ({
 
 const StyledAside = styled(Container)`
   background-color: ${(props) => props.theme.aside.backgroundColor};
-  height: ${({ asideHeight, theme }) =>
-    asideHeight ? asideHeight : theme.aside.height};
-  margin-bottom: ${({ keyboardHeight }) =>
-    keyboardHeight ? `${keyboardHeight}px` : 0};
+  height: ${(props) => props.theme.aside.height};
 
   position: fixed;
   top: ${(props) => props.theme.aside.top};
@@ -70,10 +65,7 @@ const StyledAside = styled(Container)`
   @media ${mobile} {
     bottom: 0;
     top: unset;
-    height: ${({ asideHeight }) =>
-      asideHeight
-        ? `calc(${asideHeight} - ${mobileFooterHeight})`
-        : `calc(100% - ${mobileFooterHeight})`};
+    height: ${`calc(100% - ${mobileFooterHeight})`};
 
     width: 100%;
     max-width: 100%;