From d39590604fa8529a44fa9ed520346889b58481cd Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 15 Mar 2026 11:03:26 +0000
Subject: [PATCH] fix: prevent grid right-edge overflow by gating Responsive on
 containerWidth

Gate <Responsive> rendering on containerWidth > 0 so it only mounts after
ResizeObserver has measured the container. Use availableWidth directly as
the width prop (no window.innerWidth fallback) since the component now only
renders when containerWidth is known. This prevents the grid from rendering
wider than its container (which caused the rightmost column to overflow the
right edge).

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

diff --git a/web/src/views/live/DraggableGridLayout.tsx b/web/src/views/live/DraggableGridLayout.tsx
index cfa3ff918..1f75c2fc4 100644
--- a/web/src/views/live/DraggableGridLayout.tsx
+++ b/web/src/views/live/DraggableGridLayout.tsx
@@ -710,9 +710,9 @@ export default function DraggableGridLayout({
             currentGroups={groups}
             activeGroup={group}
           />
-          <Responsive
+          {containerWidth > 0 && <Responsive
             className="grid-layout"
-            width={availableWidth || window.innerWidth}
+            width={availableWidth}
             layouts={{
               lg: currentGridLayout,
               md: currentGridLayout,
@@ -887,7 +887,7 @@ export default function DraggableGridLayout({
                 </GridLiveContextMenu>
               );
             })}
-          </Responsive>
+          </Responsive>}
           {isDesktop && (
             <div
               className={cn(