rework mobile view height

src/app/App.tsx

@@ -24,10 +24,12 @@ function App(): JSX.Element {
     const dispatch = useDispatch();
 
     return (
-        <div className="app">
+        <div className="pb-app">
             <Toolbar />
             <SplitterLayout
-                customClassName={`h-body ${showDocs ? 'pb-show-docs' : 'pb-hide-docs'}`}
+                customClassName={`pb-app-body ${
+                    showDocs ? 'pb-show-docs' : 'pb-hide-docs'
+                }`}
                 onDragStart={(): void => setDragging(true)}
                 onDragEnd={(): void => setDragging(false)}
                 percentage={true}

src/app/app.scss

@@ -5,6 +5,13 @@
 
 @import '../variables.scss';
 
+.pb-app-body {
+    // height makes everything fit without scrolling
+    height: calc(
+        var(--pb-vh, 100vh) - #{$pt-navbar-height} - #{$pb-status-bar-height}
+    ) !important;
+}
+
 .#{$ns}-dark .splitter-layout > .layout-splitter {
     // make layout splitter match app color scheme
     background-color: $pt-dark-app-background-color;

src/index.scss

@@ -6,7 +6,7 @@
 @import '~@blueprintjs/core/src/blueprint.scss';
 
 :root {
-    --mobile-pad: 0px;
+    --pb-vh: 100vh;
 }
 
 body {
@@ -17,13 +17,6 @@ body {
 
 // Utility classes
 
-.h-body {
-    // height makes everything fit without scrolling
-    height: calc(
-        100vh - #{$pt-navbar-height} - #{$pb-status-bar-height} - var(--mobile-pad)
-    ) !important;
-}
-
 .h-100 {
     height: 100%;
 }

src/index.tsx

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020-2021 The Pybricks Authors
 
-import { Classes, ResizeSensor } from '@blueprintjs/core';
+import { Classes } from '@blueprintjs/core';
 import { I18nContext } from '@shopify/react-i18n';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -19,6 +19,7 @@ import rootSaga from './sagas';
 import { didSucceed, didUpdate } from './service-worker/actions';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import { defaultTerminalContext } from './terminal/TerminalContext';
+import ViewHeightSensor from './utils/ViewHeightSensor';
 import { createCountFunc } from './utils/iter';
 
 const toaster = I18nToaster.create(i18nManager);
@@ -74,18 +75,7 @@ ReactDOM.render(
     <React.StrictMode>
         <Provider store={store}>
             <I18nContext.Provider value={i18nManager}>
-                {/* This is a hack for correctly sizing to view height on mobile when not running in fullscreen mode. */}
-                {/* https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ */}
-                <ResizeSensor
-                    onResize={(e): void => {
-                        document.documentElement.style.setProperty(
-                            '--mobile-pad',
-                            `${e[0].contentRect.height - window.innerHeight}px`,
-                        );
-                    }}
-                >
-                    <div id="vh" className="h-100 w-100 p-absolute" />
-                </ResizeSensor>
+                <ViewHeightSensor />
                 <App />
             </I18nContext.Provider>
         </Provider>

src/status-bar/StatusBar.tsx

@@ -10,7 +10,7 @@ class StatusBar extends React.Component {
     render(): JSX.Element {
         return (
             <div
-                className="status-bar"
+                className="pb-status-bar"
                 onContextMenu={(e): void => e.preventDefault()}
             ></div>
         );

src/status-bar/status-bar.scss

@@ -5,9 +5,9 @@
 
 @import '../variables.scss';
 
-.status-bar {
+.pb-status-bar {
     position: fixed;
-    top: calc(100vh - #{$pb-status-bar-height} - var(--mobile-pad));
+    top: calc(var(--pb-vh, 100vh) - #{$pb-status-bar-height});
     background-color: $pb-pybricks-blue;
     height: $pb-status-bar-height;
     width: 100vw;

src/utils/ViewHeightSensor.tsx

@@ -0,0 +1,23 @@
+/* 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" className="h-100 w-100 p-absolute" />
+        </ResizeSensor>
+    );
+}
+
+export default ViewHeightSensor;