Lint & small changes

frontend/src/hooks/usePaneResize.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef } from 'react';
+import { useState, useCallback, useRef, useLayoutEffect } from 'react';
 
 interface PaneResizeHandlers {
   onPointerDown: (e: React.PointerEvent) => void;
@@ -22,9 +22,24 @@ export function usePaneResize(
   const isVertical = side === 'top' || side === 'bottom';
   const styleProp = isVertical ? 'height' : 'width';
 
-  const targetCallbackRef = useCallback((el: HTMLElement | null) => {
-    targetRef.current = el;
-  }, []);
+  const targetCallbackRef = useCallback(
+    (el: HTMLElement | null) => {
+      targetRef.current = el;
+      if (el) {
+        el.style[styleProp] = `${liveSizeRef.current}px`;
+      }
+    },
+    [styleProp]
+  );
+
+  // Keep DOM in sync when React state commits (e.g. on pointerUp).
+  // This ensures the ref-managed element always reflects the latest size
+  // without relying on React-controlled style props.
+  useLayoutEffect(() => {
+    if (targetRef.current) {
+      targetRef.current.style[styleProp] = `${size}px`;
+    }
+  }, [size, styleProp]);
 
   const computeSize = useCallback(
     (e: React.PointerEvent): number => {