From 853978ed4d01fd4ec4528917003619e259c14924 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 21 Mar 2026 11:53:49 +0000
Subject: [PATCH] Allow drag reordering in Fit to Screen mode

In fitToScreen mode, drag is now enabled so users can reorder cameras
while in edit mode. A fitLayoutOverride state captures the new order
after each drag, normalizing w/h back to gridUnitsPerCam to prevent
size changes. The override resets automatically when the camera list or
grid parameters change.

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

diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx
index 4e650e058..455204758 100644
--- a/web/src/views/live/DraggableGridLayout.tsx
+++ b/web/src/views/live/DraggableGridLayout.tsx
@@ -466,7 +466,32 @@ export default function DraggableGridLayout({
     }));
   }, [fitToScreen, fitGridParams, cameras, includeBirdseye, birdseyeConfig]);
 
-  const activeGridLayout = fitToScreen && fitLayout ? fitLayout : currentGridLayout;
+  const [fitLayoutOverride, setFitLayoutOverride] = useState<Layout | undefined>();
+
+  useEffect(() => {
+    setFitLayoutOverride(undefined);
+  }, [fitGridParams, cameras, includeBirdseye]);
+
+  const handleFitDragStop = useCallback(
+    (newLayout: Layout) => {
+      if (!fitToScreen || !fitGridParams) return;
+      const w = fitGridParams.gridUnitsPerCam;
+      const normalized = newLayout.map((item) => ({
+        ...item,
+        w,
+        h: w,
+      }));
+      setFitLayoutOverride(normalized);
+    },
+    [fitToScreen, fitGridParams],
+  );
+
+  const activeGridLayout = useMemo(() => {
+    if (fitToScreen) {
+      return fitLayoutOverride ?? fitLayout ?? currentGridLayout;
+    }
+    return currentGridLayout;
+  }, [fitToScreen, fitLayoutOverride, fitLayout, currentGridLayout]);
 
   const handleResize = (
     _layout: Layout,
@@ -837,9 +862,9 @@ export default function DraggableGridLayout({
               handles: isEditMode && !fitToScreen ? ["sw", "nw", "se", "ne"] : [],
             }}
             dragConfig={{
-              enabled: isEditMode && !fitToScreen,
+              enabled: isEditMode,
             }}
-            onDragStop={handleLayoutChange}
+            onDragStop={fitToScreen ? handleFitDragStop : handleLayoutChange}
             onResize={handleResize}
             onResizeStart={() => setShowCircles(false)}
             onResizeStop={handleLayoutChange}