From 46334ec8be78fa649fc681ecfaeacf24432ae0a7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 21 Mar 2026 12:26:03 +0000
Subject: [PATCH] Fix fit-to-screen drag card disappearing and swap icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

handleFitDragStop now sorts dragged items by position to determine new
order, then recalculates all x/y coords into a strict dense grid instead
of spreading react-grid-layout's arbitrary y values — prevents cards from
being pushed off-screen after a drag.

Also replaces LuMaximize with LuScanBarcode for the fit-to-screen button.

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

diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx
index 455204758..fb7b4063b 100644
--- a/web/src/views/live/DraggableGridLayout.tsx
+++ b/web/src/views/live/DraggableGridLayout.tsx
@@ -39,7 +39,7 @@ import { isDesktop, isMobile } from "react-device-detect";
 import BirdseyeLivePlayer from "@/components/player/BirdseyeLivePlayer";
 import LivePlayer from "@/components/player/LivePlayer";
 import { IoClose, IoStatsChart } from "react-icons/io5";
-import { LuLayoutDashboard, LuMaximize, LuPencil } from "react-icons/lu";
+import { LuLayoutDashboard, LuScanBarcode, LuPencil } from "react-icons/lu";
 import { cn } from "@/lib/utils";
 import { EditGroupDialog } from "@/components/filter/CameraGroupSelector";
 import { useUserPersistedOverlayState } from "@/hooks/use-overlay-state";
@@ -476,11 +476,21 @@ export default function DraggableGridLayout({
     (newLayout: Layout) => {
       if (!fitToScreen || !fitGridParams) return;
       const w = fitGridParams.gridUnitsPerCam;
-      const normalized = newLayout.map((item) => ({
-        ...item,
+      const colsPerRow = fitGridParams.colsPerRow;
+
+      const sorted = [...newLayout].sort((a, b) => {
+        if (a.y !== b.y) return a.y - b.y;
+        return a.x - b.x;
+      });
+
+      const normalized = sorted.map((item, index) => ({
+        i: item.i,
+        x: (index % colsPerRow) * w,
+        y: Math.floor(index / colsPerRow) * w,
         w,
         h: w,
       }));
+
       setFitLayoutOverride(normalized);
     },
     [fitToScreen, fitGridParams],
@@ -1125,7 +1135,7 @@ export default function DraggableGridLayout({
                         )}
                         onClick={() => setFitToScreen(!fitToScreen)}
                       >
-                        <LuMaximize className="size-5 md:m-[6px]" />
+                        <LuScanBarcode className="size-5 md:m-[6px]" />
                       </div>
                     </TooltipTrigger>
                     <TooltipContent>