fix(preview): keep guest viewport and server snapshot in lockstep

A size-only ready check could resolve resize before React committed the
webview geometry. A failed CDP apply also left the persisted snapshot
on the new size.

Resize now waits for the existing ready gates, rolls the snapshot back
when the override fails, and re-applies the committed setting when the
guest attaches.

Author: gbarros-dev

apps/web/src/components/preview/PreviewAutomationHosts.tsx

@@ -179,14 +179,6 @@ const waitForRenderedViewport = async (
       const appliedSettingKey = webview?.getAttribute("data-preview-viewport-key") ?? null;
       const declaredViewport = readDeclaredViewport(webview);
       const renderedViewport = webview ? await readWebviewViewport(webview) : null;
-      if (
-        setting._tag !== "fill" &&
-        renderedViewport &&
-        Math.abs(renderedViewport.width - setting.width) <= 1 &&
-        Math.abs(renderedViewport.height - setting.height) <= 1
-      ) {
-        return renderedViewport;
-      }
       if (
         renderedViewport &&
         isPreviewViewportReady({
@@ -531,6 +523,17 @@ function PreviewAutomationHost(props: { readonly environmentId: EnvironmentId })
               try {
                 await applyPreviewGuestViewport(setViewport, ready.runtimeTabId, setting);
               } catch (error) {
+                const rollback = await resize({
+                  environmentId,
+                  input: {
+                    threadId: request.threadId,
+                    tabId: ready.tabId,
+                    viewport: previousSetting,
+                  },
+                });
+                if (rollback._tag !== "Failure") {
+                  updatePreviewServerSnapshot(threadRef, rollback.value);
+                }
                 await applyPreviewGuestViewport(
                   setViewport,
                   ready.runtimeTabId,

apps/web/src/components/preview/PreviewView.tsx

@@ -240,17 +240,21 @@ export function PreviewView({
         throw error;
       }
       updatePreviewServerSnapshot(threadRef, result.value);
-      if (runtimeTabId) {
-        await applyPreviewGuestViewport(
-          previewBridge?.automation.setViewport,
-          runtimeTabId,
-          nextViewport,
-        );
-      }
     },
-    [resize, runtimeTabId, tabId, threadRef],
+    [resize, tabId, threadRef],
   );
 
+  const viewportOverrideKey =
+    viewport._tag === "fill" ? "fill" : `${viewport._tag}:${viewport.width}x${viewport.height}`;
+  useEffect(() => {
+    if (!runtimeTabId || !desktopOverlay?.hasWebContents) return;
+    void applyPreviewGuestViewport(
+      previewBridge?.automation.setViewport,
+      runtimeTabId,
+      viewport,
+    ).catch(() => undefined);
+  }, [desktopOverlay?.hasWebContents, runtimeTabId, viewport, viewportOverrideKey]);
+
   const handleToggleDeviceToolbar = () => {
     if (!runtimeTabId) return;
     if (viewport._tag !== "fill") {