Client: fix height of main component

packages/client/src/components/Main/index.js

@@ -1,11 +1,15 @@
 import React from "react";
+import { inject, observer } from "mobx-react";
 import styled, { css } from "styled-components";
-import { isIOS, isFirefox } from "react-device-detect";
+import { isMobile, isIOS, isFirefox } from "react-device-detect";
 
-import { mobile } from "@docspace/components/utils/device";
+import {
+  mobile,
+  isMobile as isMobileUtils,
+} from "@docspace/components/utils/device";
 
 const StyledMain = styled.main`
-  height: ${isIOS && !isFirefox ? "calc(var(--vh, 1vh) * 100)" : "100vh"};
+  height: ${(props) => props.mainHeight && `${props.mainHeight}px`};
   width: 100vw;
   z-index: 0;
   display: flex;
@@ -21,19 +25,89 @@ const StyledMain = styled.main`
     box-sizing: border-box;
   }
 
-  @media ${mobile} {
+  /** @media ${mobile} {
     height: ${isIOS && !isFirefox
-      ? "calc(var(--vh, 1vh) * 100)"
-      : "calc(100vh - 64px)"};
-  }
+    ? "calc(var(--vh, 1vh) * 100)"
+    : "calc(100vh - 64px)"};
+  } */
 `;
 
-const Main = React.memo((props) => {
+const Main = (props) => {
+  const { mainBarVisible, isBannerVisible } = props;
   //console.log("Main render");
+  const [mainHeight, setMainHeight] = React.useState(window.innerHeight);
+  const updateSizeRef = React.useRef(null);
 
-  return <StyledMain className="main" {...props} />;
-});
+  React.useEffect(() => {
+    window.addEventListener("resize", onResize);
+    window.visualViewport.addEventListener("resize", onResize);
+
+    return () => {
+      window.addEventListener("resize", onResize);
+      window.visualViewport.removeEventListener("resize", onResize);
+      clearTimeout(updateSizeRef.current);
+    };
+  }, [onResize]);
+
+  React.useEffect(() => {
+    onResize();
+  }, [mainBarVisible, isBannerVisible]);
+
+  const onResize = React.useCallback(
+    (e) => {
+      let correctHeight = window.innerHeight;
+
+      if (mainBarVisible && isMobileUtils()) {
+        const mainBar = document.getElementById("main-bar");
+
+        if (!mainBar.offsetHeight)
+          return (updateSizeRef.current = setTimeout(() => onResize(), 0));
+
+        correctHeight -= mainBar.offsetHeight;
+      }
+
+      const isTouchDevice =
+        "ontouchstart" in window ||
+        navigator.maxTouchPoints > 0 ||
+        navigator.msMaxTouchPoints > 0;
+
+      const path = window.location.pathname.toLowerCase();
+
+      if (
+        isBannerVisible &&
+        isMobile &&
+        isTouchDevice &&
+        (path.includes("rooms") || path.includes("files"))
+      ) {
+        correctHeight -= 80;
+
+        if (e?.target?.height) {
+          const diff = window.innerHeight - e.target.height;
+
+          correctHeight -= diff;
+        }
+      }
+
+      if (isMobileUtils()) {
+        correctHeight -= 64;
+      }
+
+      setMainHeight(correctHeight);
+    },
+    [mainBarVisible, isBannerVisible]
+  );
+
+  return <StyledMain className="main" mainHeight={mainHeight} {...props} />;
+};
 
 Main.displayName = "Main";
 
-export default Main;
+export default inject(({ auth }) => {
+  const { isBannerVisible } = auth.bannerStore;
+
+  const { mainBarVisible } = auth.settingsStore;
+  return {
+    mainBarVisible,
+    isBannerVisible,
+  };
+})(observer(Main));