Restore app sending both width and height for backwards compatibility

The SDK App class now sends both width and height in size-changed
notifications to maintain backwards compatibility with older hosts.
Hosts only use the height value but receive both.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: martinalong

src/app.ts

@@ -850,11 +850,11 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    * Apps can manually report size changes to help the host adjust the iframe.
    * If `autoResize` is enabled (default), this is called automatically.
    *
-   * @param params - New height in pixels
+   * @param params - New width and/or height in pixels
    *
    * @example Manually notify host of size change
    * ```typescript
-   * app.sendSizeChanged({ height: 600 });
+   * app.sendSizeChanged({ width: 400, height: 600 });
    * ```
    *
    * @returns Promise that resolves when the notification is sent
@@ -895,6 +895,7 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
    */
   setupSizeChangedNotifications() {
     let scheduled = false;
+    let lastWidth = 0;
     let lastHeight = 0;
 
     const sendBodySizeChanged = () => {
@@ -909,8 +910,6 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
         // Measure actual content size by temporarily setting html to fit-content.
         // This shrinks html to fit body (including body margins), giving us the
         // true minimum size needed by the content.
-        // Note: We must set both width and height to fit-content for accurate
-        // measurement, as setting only height can cause incorrect layout calculation.
         const originalWidth = html.style.width;
         const originalHeight = html.style.height;
         html.style.width = "fit-content";
@@ -919,12 +918,18 @@ export class App extends Protocol<AppRequest, AppNotification, AppResult> {
         html.style.width = originalWidth;
         html.style.height = originalHeight;
 
+        // Compensate for scrollbar width on Linux/Windows where scrollbars consume space.
+        // On systems with overlay scrollbars (macOS), this will be 0.
+        const scrollbarWidth = window.innerWidth - html.clientWidth;
+
+        const width = Math.ceil(rect.width + scrollbarWidth);
         const height = Math.ceil(rect.height);
 
-        // Only send if height actually changed (prevents feedback loops from style changes)
-        if (height !== lastHeight) {
+        // Only send if size actually changed (prevents feedback loops from style changes)
+        if (width !== lastWidth || height !== lastHeight) {
+          lastWidth = width;
           lastHeight = height;
-          this.sendSizeChanged({ height });
+          this.sendSizeChanged({ width, height });
         }
       });
     };

src/generated/schema.json

@@ -2943,12 +2943,15 @@
         "params": {
           "type": "object",
           "properties": {
+            "width": {
+              "description": "New width in pixels.",
+              "type": "number"
+            },
             "height": {
               "description": "New height in pixels.",
               "type": "number"
             }
           },
-          "required": ["height"],
           "additionalProperties": false
         }
       },

src/generated/schema.ts

@@ -216,15 +216,16 @@ export const McpUiSandboxResourceReadyNotificationSchema = z.object({
 });
 
 /**
- * @description Notification of UI size change (Guest -> Host).
- * Sent when the Guest UI's content height changes, allowing the host to resize the iframe.
+ * @description Notification of UI size changes (bidirectional: Guest <-> Host).
  * @see {@link app.App.sendSizeChanged} for the method to send this from Guest UI
  */
 export const McpUiSizeChangedNotificationSchema = z.object({
   method: z.literal("ui/notifications/size-changed"),
   params: z.object({
+    /** @description New width in pixels. */
+    width: z.number().optional().describe("New width in pixels."),
     /** @description New height in pixels. */
-    height: z.number().describe("New height in pixels."),
+    height: z.number().optional().describe("New height in pixels."),
   }),
 });
 

src/spec.types.ts

@@ -227,15 +227,16 @@ export interface McpUiSandboxResourceReadyNotification {
 }
 
 /**
- * @description Notification of UI size change (Guest -> Host).
- * Sent when the Guest UI's content height changes, allowing the host to resize the iframe.
+ * @description Notification of UI size changes (bidirectional: Guest <-> Host).
  * @see {@link app.App.sendSizeChanged} for the method to send this from Guest UI
  */
 export interface McpUiSizeChangedNotification {
   method: "ui/notifications/size-changed";
   params: {
+    /** @description New width in pixels. */
+    width?: number;
     /** @description New height in pixels. */
-    height: number;
+    height?: number;
   };
 }