From b7b5b08d539c40ab07502563547020b072b8b58d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 16 Mar 2026 07:15:11 +0000
Subject: [PATCH] Remove grid spacing between cards and from edges

Set margin and containerPadding to [0,0] in ResponsiveGridLayout,
removed px-2/my-2/pb-8 from the wrapper div, and updated cellHeight
formula to not account for margins.

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

diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx
index c24b20974..613b9c5b2 100644
--- a/web/src/views/live/DraggableGridLayout.tsx
+++ b/web/src/views/live/DraggableGridLayout.tsx
@@ -371,16 +371,8 @@ export default function DraggableGridLayout({
 
   const cellHeight = useMemo(() => {
     const aspectRatio = 16 / 9;
-    // subtract container margin, 1 camera takes up at least 4 rows
-    // account for additional margin on bottom of each row
-    return (
-      (availableWidth - 2 * marginValue) /
-        12 /
-        aspectRatio -
-      marginValue +
-      marginValue / 4
-    );
-  }, [availableWidth, marginValue]);
+    return availableWidth / 12 / aspectRatio;
+  }, [availableWidth]);
 
   const handleResize = (
     _layout: Layout,
@@ -716,7 +708,7 @@ export default function DraggableGridLayout({
         </div>
       ) : (
         <div
-          className="no-scrollbar my-2 select-none overflow-x-hidden px-2 pb-8"
+          className="no-scrollbar select-none overflow-x-hidden"
           ref={gridContainerRef}
         >
           <EditGroupDialog
@@ -738,8 +730,8 @@ export default function DraggableGridLayout({
             rowHeight={cellHeight}
             breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
             cols={{ lg: 12, md: 12, sm: 12, xs: 12, xxs: 12 }}
-            margin={[marginValue, marginValue]}
-            containerPadding={[0, isEditMode ? 6 : 3]}
+            margin={[0, 0]}
+            containerPadding={[0, 0]}
             resizeConfig={{
               enabled: isEditMode,
               handles: isEditMode ? ["sw", "nw", "se", "ne"] : [],