From 1a67af676193c55107902a7a256ebe570735dbbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= <hn@hartmut-noerenberg.com>
Date: Thu, 9 Apr 2026 20:58:57 +0200
Subject: [PATCH] fix(dashboard): measure grid container width after hydration
 completes, not just on mount

---
 apps/web/src/components/dashboard/DashboardClient.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/dashboard/DashboardClient.tsx b/apps/web/src/components/dashboard/DashboardClient.tsx
index 7a43285..dcce3c3 100644
--- a/apps/web/src/components/dashboard/DashboardClient.tsx
+++ b/apps/web/src/components/dashboard/DashboardClient.tsx
@@ -166,6 +166,9 @@ export function DashboardClient() {
   const resizeFrameRef = useRef<number | null>(null);
   const lastMeasuredWidthRef = useRef(0);
   const [gridWidth, setGridWidth] = useState(1200);
+  // Re-run when isHydrated flips: on first mount the containerRef div doesn't
+  // exist yet (skeleton is shown), so the effect returns early. Once hydration
+  // completes the real container div is rendered and we need to measure it.
   useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
@@ -189,7 +192,7 @@ export function DashboardClient() {
       ro.disconnect();
       if (resizeFrameRef.current !== null) cancelAnimationFrame(resizeFrameRef.current);
     };
-  }, []);
+  }, [isHydrated]);
 
   const layouts = useMemo(
     () => ({