Update onsizechange to onheightchange

Author: martinalong

examples/basic-host/src/implementation.ts

@@ -244,38 +244,23 @@ export function newAppBridge(serverInfo: ServerInfo, iframe: HTMLIFrameElement):
     log.info("Log message from MCP App:", params);
   };
 
-  appBridge.onsizechange = async ({ width, height }) => {
-    // The MCP App has requested a `width` and `height`, but if
-    // `box-sizing: border-box` is applied to the outer iframe element, then we
-    // must add border thickness to `width` and `height` to compute the actual
-    // necessary width and height (in order to prevent a resize feedback loop).
+  appBridge.onheightchange = ({ height }) => {
+    // The MCP App has requested a `height`, but if `box-sizing: border-box` is
+    // applied to the outer iframe element, then we must add border thickness to
+    // `height` to compute the actual necessary height (to prevent a resize
+    // feedback loop).
     const style = getComputedStyle(iframe);
     const isBorderBox = style.boxSizing === "border-box";
 
-    // Animate the change for a smooth transition.
-    const from: Keyframe = {};
-    const to: Keyframe = {};
-
-    if (width !== undefined) {
-      if (isBorderBox) {
-        width += parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
-      }
-      // Use min-width instead of width to allow responsive growing.
-      // With auto-resize (the default), the app reports its minimum content
-      // width; we honor that as a floor but allow the iframe to expand when
-      // the host layout allows. And we use `min(..., 100%)` so that the iframe
-      // shrinks with its container.
-      from.minWidth = `${iframe.offsetWidth}px`;
-      iframe.style.minWidth = to.minWidth = `min(${width}px, 100%)`;
-    }
-    if (height !== undefined) {
-      if (isBorderBox) {
-        height += parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
-      }
-      from.height = `${iframe.offsetHeight}px`;
-      iframe.style.height = to.height = `${height}px`;
+    if (isBorderBox) {
+      height += parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
     }
 
+    // Animate the change for a smooth transition.
+    const from: Keyframe = { height: `${iframe.offsetHeight}px` };
+    const to: Keyframe = { height: `${height}px` };
+    iframe.style.height = `${height}px`;
+
     iframe.animate([from, to], { duration: 300, easing: "ease-out" });
   };
 

examples/basic-server-react/src/global.css

@@ -5,6 +5,9 @@
 html, body {
   font-family: system-ui, -apple-system, sans-serif;
   font-size: 1rem;
+  margin: 0;
+  padding: 0;
+  width: 100%;
 }
 
 code {

examples/basic-server-react/src/mcp-app.module.css

@@ -4,7 +4,6 @@
   --color-notice-bg: #eff6ff;
 
   width: 100%;
-  max-width: 425px;
   box-sizing: border-box;
 
   > * {

examples/basic-server-vanillajs/src/global.css

@@ -5,6 +5,9 @@
 html, body {
   font-family: system-ui, -apple-system, sans-serif;
   font-size: 1rem;
+  margin: 0;
+  padding: 0;
+  width: 100%;
 }
 
 code {

examples/basic-server-vanillajs/src/mcp-app.css

@@ -4,7 +4,6 @@
   --color-notice-bg: #eff6ff;
 
   width: 100%;
-  max-width: 425px;
   box-sizing: border-box;
 
   > * {

examples/budget-allocator-server/src/global.css

@@ -7,6 +7,7 @@ html, body {
   font-size: 14px;
   margin: 0;
   padding: 0;
+  width: 100%;
 }
 
 code {

examples/cohort-heatmap-server/src/global.css

@@ -7,4 +7,5 @@ html, body {
   font-size: 1rem;
   margin: 0;
   padding: 0;
+  width: 100%;
 }

examples/customer-segmentation-server/src/global.css

@@ -5,6 +5,9 @@
 html, body {
   font-family: system-ui, -apple-system, sans-serif;
   font-size: 1rem;
+  margin: 0;
+  padding: 0;
+  width: 100%;
 }
 
 code {

examples/scenario-modeler-server/src/global.css

@@ -7,6 +7,7 @@ html, body {
   padding: 0;
   font-family: system-ui, -apple-system, sans-serif;
   font-size: 1rem;
+  width: 100%;
 }
 
 code {

examples/system-monitor-server/src/global.css

@@ -5,6 +5,9 @@
 html, body {
   font-family: system-ui, -apple-system, sans-serif;
   font-size: 1rem;
+  margin: 0;
+  padding: 0;
+  width: 100%;
 }
 
 code {