Fix split layout not always working

src-web/components/core/SplitLayout.tsx

@@ -1,9 +1,9 @@
-import useSize from '@react-hook/size';
 import classNames from 'classnames';
 import type { CSSProperties, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { useLocalStorage } from 'react-use';
 import { useActiveWorkspace } from '../../hooks/useActiveWorkspace';
+import { useContainerSize } from '../../hooks/useContainerQuery';
 import { clamp } from '../../lib/clamp';
 import { ResizeHandle } from '../ResizeHandle';
 
@@ -61,7 +61,8 @@ export function SplitLayout({
     minHeightPx = 0;
   }
 
-  const verticalBasedOnSize = useSize(containerRef.current)[0] < STACK_VERTICAL_WIDTH;
+  const size = useContainerSize(containerRef);
+  const verticalBasedOnSize = size.width < STACK_VERTICAL_WIDTH;
   const vertical = layout !== 'horizontal' && (layout === 'vertical' || verticalBasedOnSize);
 
   const styles = useMemo<CSSProperties>(() => {

src-web/hooks/useContainerQuery.ts

@@ -0,0 +1,30 @@
+import type { MutableRefObject } from 'react';
+import { useLayoutEffect, useState } from 'react';
+
+export function useContainerSize(ref: MutableRefObject<HTMLElement | null>) {
+  const [size, setSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 });
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (el) {
+      const observer = new ResizeObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.target === el) {
+            setSize({ width: entry.contentRect.width, height: entry.contentRect.height });
+          }
+        });
+      });
+
+      observer.observe(el);
+
+      return () => {
+        observer.unobserve(el);
+        observer.disconnect();
+      };
+    }
+
+    return undefined;
+  }, [ref]);
+
+  return size;
+}

src-web/package.json

@@ -19,7 +19,6 @@
     "@gilbarbara/deep-equal": "^0.3.1",
     "@lezer/highlight": "^1.1.3",
     "@lezer/lr": "^1.3.3",
-    "@react-hook/size": "^2.1.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tanstack/react-query": "^5.62.16",
     "@tanstack/react-router": "^1.95.1",