Fix issue where World view minimum size wasn't taking into account na…

…vigator sidebar or debugger pane causing unnecessary scroll bars

CHANGELOG.md

@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix issue where some sidebar inputs would appear above script tabs when scrolled
 - Fix rumble support when using MBC5 cartridge [@pau-tomas](https://github.com/pau-tomas)
 - Fix issue where empty project message would be positioned incorrectly if World view was scrolled or zoomed
+- Fix issue where World view minimum size wasn't taking into account navigator sidebar or debugger pane causing unnecessary scroll bars
 
 ## [4.0.0-beta2]
 

src/components/world/WorldView.tsx

@@ -30,6 +30,7 @@ import styled from "styled-components";
 import { useAppDispatch, useAppSelector } from "store/hooks";
 import { SceneNormalized } from "shared/lib/entities/entitiesTypes";
 import { Selection } from "ui/document/Selection";
+import useResizeObserver from "ui/hooks/use-resize-observer";
 
 const Wrapper = styled.div`
   position: absolute;
@@ -88,7 +89,8 @@ const WorldView = () => {
   const dispatch = useAppDispatch();
   const store = useStore();
 
-  const scrollRef = useRef<HTMLDivElement>(null);
+  const [scrollRef, scrollContainerSize] = useResizeObserver<HTMLDivElement>();
+
   const scrollContentsRef = useRef<HTMLDivElement>(null);
   const worldRef = useRef<HTMLDivElement>(null);
   const blockWheelZoom = useRef<number>();
@@ -131,12 +133,9 @@ const WorldView = () => {
     (state) => state.editor.clipboardVariables
   );
   const focusSceneId = useAppSelector((state) => state.editor.focusSceneId);
-  const sidebarWidth = useAppSelector(
-    (state) => state.editor.worldSidebarWidth
-  );
 
-  const viewportWidth = window.innerWidth - sidebarWidth - 17;
-  const viewportHeight = window.innerHeight - 40 - 17;
+  const viewportWidth = scrollContainerSize?.width ?? 0;
+  const viewportHeight = scrollContainerSize?.height ?? 0;
 
   const scrollWidth = useAppSelector((state) =>
     Math.max(viewportWidth, getMaxSceneRight(state) + 20)