From 8216394c59a015c82c397a81f62af400266f2986 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 22 Mar 2026 06:49:16 +0000
Subject: [PATCH] Fix fit-to-screen drag reset: use primitive deps in
 fitLayoutOverride effect

fitGridParams is recreated on every useMemo run, causing the useEffect to
fire and clear fitLayoutOverride after each swap. Switch deps to
fitGridParams?.gridUnitsPerCam and fitGridParams?.colsPerRow (primitives)
so the reset only triggers when the grid geometry actually changes.

Also remove all debug console.log added during investigation.

https://claude.ai/code/session_01Cu7YDRKZrYX3sBs6g9w2dy
---
 web/src/views/live/DraggableGridLayout.tsx | 44 ++++------------------
 1 file changed, 8 insertions(+), 36 deletions(-)

diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx
index c76002dcc..6b711b7d0 100644
--- a/web/src/views/live/DraggableGridLayout.tsx
+++ b/web/src/views/live/DraggableGridLayout.tsx
@@ -471,7 +471,12 @@ export default function DraggableGridLayout({
 
   useEffect(() => {
     setFitLayoutOverride(undefined);
-  }, [fitGridParams, cameras, includeBirdseye]);
+  }, [
+    fitGridParams?.gridUnitsPerCam,
+    fitGridParams?.colsPerRow,
+    cameras,
+    includeBirdseye,
+  ]);
 
   const handleFitDragStop = useCallback(
     (
@@ -481,10 +486,7 @@ export default function DraggableGridLayout({
       _placeholder: LayoutItem | null,
       _event: Event,
     ) => {
-      if (!fitToScreen || !fitGridParams || !newItem) {
-        console.log("[FitDrag] SKIP: early return", { fitToScreen, fitGridParams: !!fitGridParams, newItem: !!newItem });
-        return;
-      }
+      if (!fitToScreen || !fitGridParams || !newItem) return;
 
       const w = fitGridParams.gridUnitsPerCam;
       const colsPerRow = fitGridParams.colsPerRow;
@@ -512,22 +514,6 @@ export default function DraggableGridLayout({
 
       const sourceIndex = orderedNames.indexOf(draggedId);
 
-      console.log("[FitDrag] CALC:", {
-        draggedId,
-        sourceIndex,
-        targetIndex,
-        targetCol,
-        targetRow,
-        clampedRow,
-        totalRows,
-        "newItem.x": newItem.x,
-        "newItem.y": newItem.y,
-        w,
-        colsPerRow,
-        orderedNames,
-        willSwap: sourceIndex !== -1 && sourceIndex !== targetIndex,
-      });
-
       const snapBack = orderedNames.map((name, index) => ({
         i: name,
         x: (index % colsPerRow) * w,
@@ -537,7 +523,6 @@ export default function DraggableGridLayout({
       }));
 
       if (sourceIndex === -1 || sourceIndex === targetIndex) {
-        console.log("[FitDrag] SNAP BACK (no swap)");
         setFitLayoutOverride(snapBack);
         return;
       }
@@ -556,13 +541,6 @@ export default function DraggableGridLayout({
         h: w,
       }));
 
-      console.log("[FitDrag] SWAP:", {
-        from: orderedNames[sourceIndex],
-        to: orderedNames[targetIndex],
-        newOrder,
-        normalized: normalized.map(n => `${n.i}(${n.x},${n.y})`),
-      });
-
       setFitLayoutOverride(normalized);
     },
     [fitToScreen, fitGridParams, fitLayoutOverride, fitLayout],
@@ -570,13 +548,7 @@ export default function DraggableGridLayout({
 
   const activeGridLayout = useMemo(() => {
     if (fitToScreen) {
-      const result = fitLayoutOverride ?? fitLayout ?? currentGridLayout;
-      console.log("[FitDrag] activeGridLayout:", {
-        usingOverride: !!fitLayoutOverride,
-        usingFitLayout: !fitLayoutOverride && !!fitLayout,
-        layout: result?.map(n => `${n.i}(${n.x},${n.y})`),
-      });
-      return result;
+      return fitLayoutOverride ?? fitLayout ?? currentGridLayout;
     }
     return currentGridLayout;
   }, [fitToScreen, fitLayoutOverride, fitLayout, currentGridLayout]);