Screen height on tablet vs keyboard

src/App.css

@@ -16,13 +16,6 @@
       format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
-/* Needed for the fallbacks below */
-@supports (height: -webkit-fill-available) {
-  :root {
-    --webkit-vhh: -webkit-fill-available;
-  }
-}
-
 :root {
   /* Seems to fix a Safari glitch: https://github.com/microbit-foundation/python-editor-v3/issues/369 */
   font-size: 16px;
@@ -34,9 +27,9 @@ body,
 .WorkbenchContainer,
 .Workbench {
   width: 100%;
-  /* --ios-vvh set by VisualViewPortCSSVariables on iOS only. */
-  height: var(--ios-vvh, var(--webkit-vvh, 100vh));
-}
-body {
-  overflow: hidden;
+  height: 100%;
+  /* 516px is the min height of the sidebar */
+  min-height: 516px;
+  /* 372px is the sidebar width + simulator width */
+  min-width: 372px;
 }

src/App.tsx

@@ -8,7 +8,6 @@ import { polyfill } from "mobile-drag-drop";
 import { useEffect } from "react";
 import "./App.css";
 import { DialogProvider } from "./common/use-dialogs";
-import VisualViewPortCSSVariables from "./common/VisualViewportCSSVariables";
 import { deployment, useDeployment } from "./deployment";
 import { MicrobitWebUSBConnection } from "./device/webusb";
 import { DeviceContextProvider } from "./device/device-hooks";
@@ -65,7 +64,6 @@ const App = () => {
   const { ConsentProvider } = deployment.compliance;
   return (
     <>
-      <VisualViewPortCSSVariables />
       <ChakraProvider theme={deployment.chakraTheme}>
         <LoggingProvider value={logging}>
           <SettingsProvider>

src/common/SplitView/SplitViewSized.tsx

@@ -3,9 +3,9 @@
  *
  * SPDX-License-Identifier: MIT
  */
+import { Box } from "@chakra-ui/layout";
 import { createRef, useEffect } from "react";
 import { dimensionPropName, useSplitViewContext } from "./context";
-import { Box } from "@chakra-ui/layout";
 
 interface SizedPaneProps {
   children: JSX.Element;
@@ -38,6 +38,7 @@ const SplitViewSized = ({ children }: SizedPaneProps) => {
   return (
     <Box
       pointerEvents={dragging ? "none" : "unset"}
+      display={mode === "collapsed" ? "none" : undefined}
       visibility={mode === "collapsed" ? "hidden" : undefined}
       ref={ref}
     >