modelcontextprotocol/ext-apps
Watch
1
0
Fork
You've already forked ext-apps
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enable responsive width growing in basic-host

Browse source 
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
1 changed files with 8 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

9
examples/basic-host/src/implementation.ts
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) {