Fix split layout not always working

package-lock.json

@@ -1505,12 +1505,6 @@
         "url": "https://opencollective.com/js-sdsl"
       }
     },
-    "node_modules/@juggle/resize-observer": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
-      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
-      "license": "Apache-2.0"
-    },
     "node_modules/@lezer/common": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.2.tgz",
@@ -1788,51 +1782,6 @@
       "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==",
       "license": "MIT"
     },
-    "node_modules/@react-hook/latest": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@react-hook/latest/-/latest-1.0.3.tgz",
-      "integrity": "sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=16.8"
-      }
-    },
-    "node_modules/@react-hook/passive-layout-effect": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz",
-      "integrity": "sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=16.8"
-      }
-    },
-    "node_modules/@react-hook/size": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@react-hook/size/-/size-2.1.2.tgz",
-      "integrity": "sha512-BmE5asyRDxSuQ9p14FUKJ0iBRgV9cROjqNG9jT/EjCM+xHha1HVqbPoT+14FQg1K7xIydabClCibUY4+1tw/iw==",
-      "license": "MIT",
-      "dependencies": {
-        "@react-hook/passive-layout-effect": "^1.2.0",
-        "@react-hook/resize-observer": "^1.2.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.8"
-      }
-    },
-    "node_modules/@react-hook/size/node_modules/@react-hook/resize-observer": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/@react-hook/resize-observer/-/resize-observer-1.2.6.tgz",
-      "integrity": "sha512-DlBXtLSW0DqYYTW3Ft1/GQFZlTdKY5VAFIC4+km6IK5NiPPDFchGbEJm1j6pSgMqPRHbUQgHJX7RaR76ic1LWA==",
-      "license": "MIT",
-      "dependencies": {
-        "@juggle/resize-observer": "^3.3.1",
-        "@react-hook/latest": "^1.0.2",
-        "@react-hook/passive-layout-effect": "^1.2.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8"
-      }
-    },
     "node_modules/@rollup/plugin-virtual": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-virtual/-/plugin-virtual-3.0.2.tgz",
@@ -15929,7 +15878,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",

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",