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

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

Browse source 
Enable responsive width growing in `basic-host`
This commit is contained in:
Jonathan Hefner 2025-12-08 10:47:29 -06:00 • committed by GitHub
commit 4200a46fc2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 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) { if (isBorderBox) {
width += parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth); width += parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
} }
from.width = `${iframe.offsetWidth}px`; // Use min-width instead of width to allow responsive growing.
iframe.style.width = to.width = `${width}px`; // 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 (height !== undefined) {
if (isBorderBox) { if (isBorderBox) {

6
examples/basic-host/src/index.module.css
View file

@ -69,7 +69,6 @@
.toolCallInfoPanel { .toolCallInfoPanel {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
max-width: 1120px;
animation: slideDown 0.3s ease-out; animation: slideDown 0.3s ease-out;
} }
@ -107,13 +106,10 @@
} }
.appIframePanel { .appIframePanel {
display: flex;
justify-content: center;
width: 100%;
min-height: 200px; min-height: 200px;
iframe { iframe {
flex: 1 0 auto; width: 100%;
height: 600px; height: 600px;
box-sizing: border-box; box-sizing: border-box;
border: 3px dashed #888; border: 3px dashed #888;