From 5e96fcc87f7e82bcff0d20852dade2b62d3f98bd Mon Sep 17 00:00:00 2001
From: Jonathan Hefner <jonathan@hefner.pro>
Date: Mon, 8 Dec 2025 10:29:00 -0600
Subject: [PATCH] Enable responsive width growing in basic-host
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Change onsizechange handler to use min-width instead of width,
treating the app's reported size as a floor rather than exact.
Use min(Xpx, 100%) to allow shrinking with container.

Also remove outmost max-width constraint and simplify iframe CSS to
allow apps to demonstrate responsive growing.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 examples/basic-host/src/implementation.ts | 9 +++++++--
 examples/basic-host/src/index.module.css  | 6 +-----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/examples/basic-host/src/implementation.ts b/examples/basic-host/src/implementation.ts
index c09561c..614aeea 100644
--- a/examples/basic-host/src/implementation.ts
+++ b/examples/basic-host/src/implementation.ts
@@ -239,8 +239,13 @@ export function newAppBridge(serverInfo: ServerInfo, iframe: HTMLIFrameElement):
       if (isBorderBox) {
         width += parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
       }
-      from.width = `${iframe.offsetWidth}px`;
-      iframe.style.width = to.width = `${width}px`;
+      // 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) {
diff --git a/examples/basic-host/src/index.module.css b/examples/basic-host/src/index.module.css
index 9681e96..bbaa542 100644
--- a/examples/basic-host/src/index.module.css
+++ b/examples/basic-host/src/index.module.css
@@ -69,7 +69,6 @@
 .toolCallInfoPanel {
   display: flex;
   gap: 1rem;
-  max-width: 1120px;
   animation: slideDown 0.3s ease-out;
 }
 
@@ -107,13 +106,10 @@
 }
 
 .appIframePanel {
-  display: flex;
-  justify-content: center;
-  width: 100%;
   min-height: 200px;
 
   iframe {
-    flex: 1 0 auto;
+    width: 100%;
     height: 600px;
     box-sizing: border-box;
     border: 3px dashed #888;