components/ViewHeightSensor: remove view height sensor

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

Author: dlech

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

@@ -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/components/ViewHeightSensor.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/index.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;