fix resize logic

Author: ochafik

examples/simple-server/src/ui-raw.ts

@@ -131,19 +131,9 @@ window.addEventListener("load", async () => {
   });
 
   new ResizeObserver(() => {
-    const { body, documentElement: html } = document;
-
-    const bodyStyle = getComputedStyle(body);
-    const htmlStyle = getComputedStyle(html);
-
-    const width = body.scrollWidth;
-    const height =
-      body.scrollHeight +
-      (parseFloat(bodyStyle.borderTop) || 0) +
-      (parseFloat(bodyStyle.borderBottom) || 0) +
-      (parseFloat(htmlStyle.borderTop) || 0) +
-      (parseFloat(htmlStyle.borderBottom) || 0);
-
+    const rect = (document.body.parentElement ?? document.body).getBoundingClientRect();
+    const width = Math.ceil(rect.width);
+    const height = Math.ceil(rect.height);
     app.sendNotification<McpUiSizeChangeNotification>({
       method: "ui/notifications/size-change",
       params: { width, height },

examples/simple-server/src/ui-vanilla.ts

@@ -48,13 +48,6 @@ window.addEventListener("load", async () => {
     appendText(`Host context changed: ${JSON.stringify(params)}`);
   };
 
-  document.body.addEventListener("resize", () => {
-    app.sendSizeChange({
-      width: document.body.scrollWidth,
-      height: document.body.scrollHeight,
-    });
-  });
-
   root.appendChild(
     Object.assign(document.createElement("button"), {
       textContent: "Get Weather (Tool)",

src/app-bridge.ts

@@ -183,13 +183,6 @@ export class AppBridge extends Protocol<Request, Notification, Result> {
     };
   }
 
-  sendSizeChange(params: McpUiSizeChangeNotification["params"]) {
-    return this.notification(<McpUiSizeChangeNotification>{
-      method: "ui/notifications/size-change",
-      params,
-    });
-  }
-
   sendToolInput(params: McpUiToolInputNotification["params"]) {
     return this.notification(<McpUiToolInputNotification>{
       method: "ui/notifications/tool-input",

src/app.ts

@@ -166,30 +166,18 @@ export class App extends Protocol<Request, Notification, Result> {
   }
 
   setupSizeChangeNotifications() {
+    let scheduled = false;
     const sendBodySizeChange = () => {
-      let rafId: number | null = null;
-
-      // Debounce using requestAnimationFrame to avoid duplicate messages
-      // when both documentElement and body fire resize events
-      if (rafId !== null) {
-        cancelAnimationFrame(rafId);
+      if (scheduled) {
+        return;
       }
-      rafId = requestAnimationFrame(() => {
-        const { body, documentElement: html } = document;
-
-        const bodyStyle = getComputedStyle(body);
-        const htmlStyle = getComputedStyle(html);
-
-        const width = body.scrollWidth;
-        const height =
-          body.scrollHeight +
-          (parseFloat(bodyStyle.borderTop) || 0) +
-          (parseFloat(bodyStyle.borderBottom) || 0) +
-          (parseFloat(htmlStyle.borderTop) || 0) +
-          (parseFloat(htmlStyle.borderBottom) || 0);
-
+      scheduled = true;
+      requestAnimationFrame(() => {
+        scheduled = false;
+        const rect = (document.body.parentElement ?? document.body).getBoundingClientRect();
+        const width = Math.ceil(rect.width);
+        const height = Math.ceil(rect.height);
         this.sendSizeChange({ width, height });
-        rafId = null;
       });
     };