Fun changes

frontend/src/hooks/usePaneResize.ts

@@ -18,6 +18,7 @@ export function usePaneResize(
   const targetRef = useRef<HTMLElement | null>(null);
   const containerOffsetRef = useRef(0);
   const containerSizeRef = useRef(0);
+  const rafRef = useRef<number | null>(null);
 
   const isVertical = side === 'top' || side === 'bottom';
   const styleProp = isVertical ? 'height' : 'width';
@@ -80,12 +81,21 @@ export function usePaneResize(
   const handlePointerMove = useCallback(
     (e: React.PointerEvent) => {
       if (!draggingRef.current) return;
-      const newSize = computeSize(e);
-      liveSizeRef.current = newSize;
+      liveSizeRef.current = computeSize(e);
       if (targetRef.current) {
-        targetRef.current.style[styleProp] = `${newSize}px`;
+        // Batch DOM updates to once per animation frame — on mobile, pointermove
+        // can fire multiple times per frame, and each direct style.height write
+        // forces a synchronous reflow that desynchronises MapLibre and deck.gl.
+        if (rafRef.current == null) {
+          rafRef.current = requestAnimationFrame(() => {
+            rafRef.current = null;
+            if (targetRef.current) {
+              targetRef.current.style[styleProp] = `${liveSizeRef.current}px`;
+            }
+          });
+        }
       } else {
-        setSize(newSize);
+        setSize(liveSizeRef.current);
       }
     },
     [computeSize, styleProp]
@@ -93,8 +103,16 @@ export function usePaneResize(
 
   const handlePointerUp = useCallback(() => {
     draggingRef.current = false;
+    if (rafRef.current != null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    // Apply final size synchronously so the commit is immediate
+    if (targetRef.current) {
+      targetRef.current.style[styleProp] = `${liveSizeRef.current}px`;
+    }
     setSize(liveSizeRef.current);
-  }, []);
+  }, [styleProp]);
 
   return [
     size,