Commit eddc8fb817dbdb6c9ce34a30a2781c02ae8be9e0 | the-knife

author	maria <maria@kuuro.net> 2026-10-09 22:51:37-03:00
committer	GitHub <noreply@github.com> 2026-10-09 22:51:37-03:00
log	eddc8fb817dbdb6c9ce34a30a2781c02ae8be9e0
tree	89838a6157a5363d3b6e99587afbc9e986dadf24
parent	033866c7aa55c53593ca31538f7d8ac99fdfe0fd
signature	Signed by PGP key B5690EEEBB952194

fix(web): server browser page resizes while the panel is dragged (#17660)

1 files changed, 26 insertions(+), 13 deletions(-)

apps
- web
  - src
    browser
    ServerBrowserSurface.tsx

apps/web/src/browser/ServerBrowserSurface.tsx+26-13

 @@ -52,7 +52,7 @@ export interface ServerBrowserHandle {
   readonly canvas: () => HTMLCanvasElement | null;
 }
-const RESIZE_DEBOUNCE_MS = 150;
+const RESIZE_THROTTLE_MS = 150;
 const ACCESS_RETRY_MS = 10_000;
 // A recent probe answer near a new tap stands in for that tap's own answer,
 // which on a slow link arrives after the tap ends.
 @@ -334,15 +334,11 @@ export function ServerBrowserSurface(props: {
     const element = canvasRef.current?.parentElement;
     if (!element) return;
     let timer: ReturnType<typeof setTimeout> | null = null;
-    const measure = () => {
+    let capTimer: ReturnType<typeof setTimeout> | null = null;
-      timer = null;
+    const growCap = () => {
-      const rect = element.getBoundingClientRect();
+      capTimer = null;
-      if (rect.width < 1 || rect.height < 1) return;
+      const size = sizeRef.current;
-      const size = { width: Math.round(rect.width), height: Math.round(rect.height) };
+      if (!size) return;
-      const previous = sizeRef.current;
-      if (previous?.width === size.width && previous.height === size.height) return;
-      sizeRef.current = size;
-      if (followSize) clientRef.current?.send({ type: "resize", ...size });
       const ratio = window.devicePixelRatio || 1;
       const width = Math.round(size.width * ratio);
       const height = Math.round(size.height * ratio);
 @@ -355,14 +351,31 @@ export function ServerBrowserSurface(props: {
             },
       );
     };
+    const measure = () => {
+      timer = null;
+      const rect = element.getBoundingClientRect();
+      if (rect.width < 1 || rect.height < 1) return;
+      const size = { width: Math.round(rect.width), height: Math.round(rect.height) };
+      const previous = sizeRef.current;
+      if (previous?.width === size.width && previous.height === size.height) return;
+      sizeRef.current = size;
+      if (followSize) clientRef.current?.send({ type: "resize", ...size });
+      // Outgrowing the cap reconnects the stream, so grow it once the size settles
+      // rather than on every throttled resize of a drag.
+      if (capTimer !== null) clearTimeout(capTimer);
+      capTimer = setTimeout(growCap, previous === null ? 0 : RESIZE_THROTTLE_MS * 2);
+    };
     const stopObserving = observeResize(element, () => {
-      if (timer !== null) clearTimeout(timer);
+      // A pending measure reads the latest size when it fires, so a drag resizes
-      // The first size connects right away; later ones settle before resizing the page.
+      // the page at most every RESIZE_THROTTLE_MS and still ends on the final size.
-      timer = setTimeout(measure, sizeRef.current === null ? 0 : RESIZE_DEBOUNCE_MS);
+      if (timer !== null) return;
+      // The first size connects right away.
+      timer = setTimeout(measure, sizeRef.current === null ? 0 : RESIZE_THROTTLE_MS);
     });
     return () => {
       stopObserving();
       if (timer !== null) clearTimeout(timer);
+      if (capTimer !== null) clearTimeout(capTimer);
     };
   }, [followSize]);