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;