Merge pull request #92 from jonathanhefner/responsive-basic-host

Enable responsive width growing in `basic-host`

Author: jonathanhefner

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) {

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;