Fix browser viewport keyboard resize, toolbar blur, and responsive re-snap bugs

- Keyboard resize: Use a ref to accumulate dimensions between renders and
  debounce commits so held arrow keys correctly step by 10px each event
  instead of repeating the same stale delta.
- Toolbar blur: Always apply edited dimensions when focus leaves the form,
  instead of silently discarding them when focus moves to another toolbar
  control like rotate or preset select.
- Responsive re-snap: Pass computed responsive size to the device toolbar
  and use it when re-selecting 'Responsive', so users can snap back to the
  panel-fitted size after manual resizes.

Author: cursoragent

apps/web/src/browser/BrowserDeviceToolbar.tsx

@@ -5,6 +5,7 @@ import {
   PREVIEW_VIEWPORT_MAX_DIMENSION,
   PREVIEW_VIEWPORT_MIN_DIMENSION,
   type PreviewViewportSetting,
+  type PreviewViewportSize,
 } from "@t3tools/contracts";
 import { PREVIEW_VIEWPORT_PRESETS, resolvePreviewViewport } from "@t3tools/shared/previewViewport";
 import { RotateCw, X } from "lucide-react";
@@ -38,10 +39,11 @@ const SELECT_ITEMS = [
 interface Props {
   readonly setting: Exclude<PreviewViewportSetting, { readonly _tag: "fill" }>;
   readonly width: number;
+  readonly responsiveSize?: PreviewViewportSize | undefined;
   readonly onChange: (setting: PreviewViewportSetting) => Promise<void>;
 }
 
-export function BrowserDeviceToolbar({ setting, width, onChange }: Props) {
+export function BrowserDeviceToolbar({ setting, width, responsiveSize, onChange }: Props) {
   const [pending, setPending] = useState(false);
   const [customSize, setCustomSize] = useState<{
     readonly width: string;
@@ -85,8 +87,9 @@ export function BrowserDeviceToolbar({ setting, width, onChange }: Props) {
   const selectViewport = (value: string | null) => {
     if (!value) return;
     if (value === RESPONSIVE_VALUE) {
-      if (setting._tag === "freeform") return;
-      apply({ _tag: "freeform", width: setting.width, height: setting.height });
+      const size = responsiveSize ?? { width: setting.width, height: setting.height };
+      if (size.width === setting.width && size.height === setting.height) return;
+      apply({ _tag: "freeform", ...size });
       return;
     }
     const preset = PREVIEW_VIEWPORT_PRESETS.find((candidate) => candidate.id === value);
@@ -154,13 +157,6 @@ export function BrowserDeviceToolbar({ setting, width, onChange }: Props) {
         onBlur={(event) => {
           const nextTarget = event.relatedTarget;
           if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) return;
-          if (
-            nextTarget instanceof HTMLElement &&
-            nextTarget.closest("[data-browser-device-toolbar]")
-          ) {
-            setCustomSize(null);
-            return;
-          }
           applyCustomSize();
         }}
       >

apps/web/src/browser/HostedBrowserWebview.tsx

@@ -11,6 +11,7 @@ import { cn } from "~/lib/utils";
 import { useActiveBrowserRecordingTabId } from "./browserRecording";
 import { useBrowserSurfaceStore } from "./browserSurfaceStore";
 import { BrowserDeviceToolbar } from "./BrowserDeviceToolbar";
+import { resolveResponsiveBrowserViewportSize } from "./browserViewportLayout";
 import { BrowserViewportResizeHandles } from "./BrowserViewportResizeHandles";
 import { acquireDesktopTab, type AcquiredDesktopTab } from "./desktopTabLifetime";
 import { usePreviewWebviewConfig } from "./previewWebviewConfigState";
@@ -193,6 +194,7 @@ export function HostedBrowserWebview(props: {
           <BrowserDeviceToolbar
             setting={effectiveViewport}
             width={Math.max(1, Math.round(containerSize.width))}
+            responsiveSize={resolveResponsiveBrowserViewportSize(containerSize, zoomFactor)}
             onChange={commitViewportChange}
           />
         ) : null}

apps/web/src/browser/useBrowserViewportResize.ts

@@ -40,6 +40,8 @@ export function useBrowserViewportResize(options: {
   const { tabId, viewport, zoomFactor, containerSize, deviceToolbarVisible } = options;
   const dragCleanupRef = useRef<(() => void) | null>(null);
   const dragVersionRef = useRef(0);
+  const keyboardSizeRef = useRef<PreviewViewportSize | null>(null);
+  const keyboardTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [dragViewport, setDragViewport] = useState<ViewportDrag | null>(null);
   const sourceViewportKey = viewportSettingKey(viewport);
   const sourceViewportKeyRef = useRef(sourceViewportKey);
@@ -65,6 +67,7 @@ export function useBrowserViewportResize(options: {
     () => () => {
       dragVersionRef.current += 1;
       dragCleanupRef.current?.();
+      if (keyboardTimerRef.current !== null) clearTimeout(keyboardTimerRef.current);
     },
     [],
   );
@@ -73,6 +76,11 @@ export function useBrowserViewportResize(options: {
     (next: PreviewViewportSetting) => {
       dragVersionRef.current += 1;
       dragCleanupRef.current?.();
+      if (keyboardTimerRef.current !== null) {
+        clearTimeout(keyboardTimerRef.current);
+        keyboardTimerRef.current = null;
+      }
+      keyboardSizeRef.current = null;
       setDragViewport(null);
       return commitBrowserViewportChange(tabId, next);
     },
@@ -109,10 +117,17 @@ export function useBrowserViewportResize(options: {
     if (!delta) return;
     event.preventDefault();
     event.stopPropagation();
-    const next = resizeFreeformViewport(effectiveViewport, delta, zoomFactor, direction);
-    if (next.width === effectiveViewport.width && next.height === effectiveViewport.height) return;
+    const base = keyboardSizeRef.current ?? effectiveViewport;
+    const next = resizeFreeformViewport(base, delta, zoomFactor, direction);
+    if (next.width === base.width && next.height === base.height) return;
+    keyboardSizeRef.current = next;
     setDragViewport({ sourceKey: sourceViewportKey, ...next, direction });
-    commitDrag({ _tag: "freeform", ...next });
+    if (keyboardTimerRef.current !== null) clearTimeout(keyboardTimerRef.current);
+    keyboardTimerRef.current = setTimeout(() => {
+      keyboardTimerRef.current = null;
+      keyboardSizeRef.current = null;
+      commitDrag({ _tag: "freeform", ...next });
+    }, 150);
   };
 
   const handleResizePointerDown = (