Enable responsive width growing in basic-host

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>
This commit is contained in:
Jonathan Hefner 2025-12-08 10:29:00 -06:00
commit 5e96fcc87f
2 changed files with 8 additions and 7 deletions

View file

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

View file

@ -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;