components/ViewHeightSensor: remove view height sensor

This appears to no longer be necessary for correct app height on Android.

src/activities/activities.scss

@@ -38,7 +38,7 @@
             top: 0px;
             // FIXME: this should be a variable
             left: 47px;
-            height: 100%;
+            height: calc(100% - pb.$status-bar-height);
             z-index: bp.$pt-z-index-overlay;
         }
     }

src/app/app.scss

@@ -16,6 +16,8 @@
     width: 100%;
     height: 100%;
     background-color: bp.$pt-app-background-color;
+    display: flex;
+    flex-direction: column;
 
     .#{bp.$ns}-dark & {
         background-color: bp.$pt-dark-app-background-color;
@@ -52,9 +54,9 @@
 }
 
 .pb-app-body {
-    // height makes everything fit without scrolling
-    height: calc(var(--pb-vh, 100vh) - #{pb.$status-bar-height}) !important;
-    position: relative;
+    min-height: 0;
+    flex: 1 1 auto;
+
     display: flex;
     flex-direction: row;
 

src/components/ViewHeightSensor.test.tsx

@@ -1,11 +0,0 @@
-// SPDX-License-Identifier: MIT
-// Copyright (c) 2021 The Pybricks Authors
-
-import { render } from '@testing-library/react';
-import React from 'react';
-import ViewHeightSensor from './ViewHeightSensor';
-
-it('should set the --pb-vh variable on resize', () => {
-    render(<ViewHeightSensor />);
-    // REVISIT: it is not easy to test the resize event since jest-dom doesn't do layout
-});

src/components/ViewHeightSensor.tsx

@@ -1,29 +0,0 @@
-// SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
-
-/* This is a hack for correctly sizing to view height on mobile when not running in fullscreen mode. */
-
-import { ResizeSensor } from '@blueprintjs/core';
-import React from 'react';
-
-/* https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ */
-
-function ViewHeightSensor(): JSX.Element {
-    return (
-        <ResizeSensor
-            onResize={(e): void => {
-                document.documentElement.style.setProperty(
-                    '--pb-vh',
-                    `${e[0].contentRect.height}px`,
-                );
-            }}
-        >
-            <div
-                id="pb-vh"
-                style={{ height: '100%', width: '100%', position: 'absolute' }}
-            />
-        </ResizeSensor>
-    );
-}
-
-export default ViewHeightSensor;

src/index.scss

@@ -12,10 +12,6 @@
 @use 'variables' as pb;
 @use '@blueprintjs/core/lib/scss/variables' as bp;
 
-:root {
-    --pb-vh: 100vh;
-}
-
 // use :focus-visible instead of :focus (so we don't need blueprint.js focus style manager)
 
 :focus {
@@ -48,6 +44,19 @@ body {
     // no scrolling of the page
     overflow: hidden;
     user-select: none;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
+
+#root {
+    width: 100%;
+    height: 100%;
+
+    & [data-overlay-container] {
+        width: 100%;
+        height: 100%;
+    }
 }
 
 // Utility classes - do not use these in new code!

src/index.tsx

@@ -13,7 +13,6 @@ import { createLogger } from 'redux-logger';
 import createSagaMiddleware from 'redux-saga';
 import App from './app/App';
 import { appVersion } from './app/constants';
-import ViewHeightSensor from './components/ViewHeightSensor';
 import { db } from './fileStorage/context';
 import { i18nManager } from './i18n';
 import { rootReducer } from './reducers';
@@ -95,7 +94,6 @@ ReactDOM.render(
     <React.StrictMode>
         <Provider store={store}>
             <I18nContext.Provider value={i18nManager}>
-                <ViewHeightSensor />
                 <OverlayProvider>
                     <HotkeysProvider>
                         <App />

src/status-bar/status-bar.scss

@@ -7,8 +7,6 @@
 @use '../variables' as pb;
 
 .pb-status-bar {
-    position: fixed;
-    top: calc(var(--pb-vh, 100vh) - #{pb.$status-bar-height});
     background-color: pb.$pybricks-blue;
     height: pb.$status-bar-height;
     width: 100vw;