Stop using resize observer for sim split height

This produces errors and a bad dev experience running locally. Use simpler approach instead.
microbit-foundation · Mar 6, 2024 · cf1ca98 · cf1ca98
1 parent 68921b8
commit cf1ca98
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 10 deletions.
diff --git a/src/simulator/Simulator.tsx b/src/simulator/Simulator.tsx
@@ -14,7 +14,6 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { IntlShape, useIntl } from "react-intl";
 import HideSplitViewButton from "../common/SplitView/HideSplitViewButton";
-import { useResizeObserverContentRect } from "../common/use-resize-observer";
 import { topBarHeight } from "../deployment/misc";
 import { DeviceContextProvider } from "../device/device-hooks";
 import { SimulatorDeviceConnection } from "../device/simulator";
@@ -73,8 +72,6 @@ const Simulator = ({
     updateTranslations(simulator.current, intl);
   }, [simulator, intl]);
   const simControlsRef = useRef<HTMLDivElement>(null);
-  const contentRect = useResizeObserverContentRect(simControlsRef);
-  const simHeight = contentRect?.height ?? 0;
   const [brand500] = useToken("colors", ["brand.500"]);
   const [running, setRunning] = useState<RunningStatus>(RunningStatus.STOPPED);
   const previouslyShown = usePrevious(shown);
@@ -139,7 +136,7 @@ const Simulator = ({
           </Box>
         </VStack>
         <SimSerialTabControlProvider>
-          <SimulatorSplitView simHeight={simHeight} simRunning={running} />
+          <SimulatorSplitView simRunning={running} />
         </SimSerialTabControlProvider>
       </Flex>
     </DeviceContextProvider>

diff --git a/src/simulator/SimulatorSplitView.tsx b/src/simulator/SimulatorSplitView.tsx
@@ -21,14 +21,10 @@ import SimulatorModules from "./SimulatorModules";
 import { useSimSerialTabControl } from "./tab-control-hooks";
 
 interface SimulatorSplitViewProps {
-  simHeight: number;
   simRunning: RunningStatus;
 }
 
-const SimulatorSplitView = ({
-  simHeight,
-  simRunning,
-}: SimulatorSplitViewProps) => {
+const SimulatorSplitView = ({ simRunning }: SimulatorSplitViewProps) => {
   const intl = useIntl();
   const connected = useConnectionStatus() === ConnectionStatus.CONNECTED;
   const [serialStateWhenOpen, setSerialStateWhenOpen] =
@@ -40,7 +36,8 @@ const SimulatorSplitView = ({
       direction="column"
       minimums={[150, 200]}
       compactSize={SerialArea.compactSize}
-      height={`calc(100% - ${simHeight}px)`}
+      height="0"
+      flexGrow={1}
       mode={serialSizedMode}
     >
       <SplitViewSized>