From f416bfecc61075d3dff69821b2d4503d6e1c4037 Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Tue, 29 Nov 2022 02:37:28 +0100
Subject: fix(frontend): reduce Android rendering errors

---
 subprojects/frontend/src/App.tsx | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

(limited to 'subprojects/frontend/src/App.tsx')

diff --git a/subprojects/frontend/src/App.tsx b/subprojects/frontend/src/App.tsx
index b162e551..cd394345 100644
--- a/subprojects/frontend/src/App.tsx
+++ b/subprojects/frontend/src/App.tsx
@@ -1,6 +1,14 @@
 import Box from '@mui/material/Box';
 import CssBaseline from '@mui/material/CssBaseline';
-import { StrictMode, Suspense, lazy } from 'react';
+import { throttle } from 'lodash-es';
+import {
+  StrictMode,
+  Suspense,
+  lazy,
+  useState,
+  useEffect,
+  useMemo,
+} from 'react';
 
 import Loading from './Loading';
 import type RootStore from './RootStore';
@@ -10,18 +18,37 @@ import ThemeProvider from './theme/ThemeProvider';
 
 const Refinery = lazy(() => import('./Refinery.js'));
 
+function useInnerHeight(): number {
+  const [innerHeight, setInnerHeight] = useState(window.innerHeight);
+  const resizeHandler = useMemo(
+    () => throttle(() => setInnerHeight(window.innerHeight), 250),
+    [],
+  );
+  useEffect(() => {
+    window.addEventListener('resize', resizeHandler, { passive: true });
+    return () => {
+      window.removeEventListener('resize', resizeHandler);
+      resizeHandler.cancel();
+    };
+  }, [resizeHandler]);
+  return innerHeight;
+}
+
 export default function App({
   rootStore,
 }: {
   rootStore: RootStore;
 }): JSX.Element {
+  // See https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+  const innerHeight = useInnerHeight();
+
   return (
     <StrictMode>
       <RootStoreProvider rootStore={rootStore}>
         <ThemeProvider>
           <CssBaseline enableColorScheme />
           <WindowControlsOverlayColor />
-          <Box height="100vh" overflow="auto">
+          <Box height={`${innerHeight}px`} overflow="hidden">
             <Suspense fallback={<Loading />}>
               <Refinery />
             </Suspense>
-- 
cgit v1.2.3-54-g00ecf