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(
     () => ({