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:
parent
d97ae07849
commit
5e96fcc87f
2 changed files with 8 additions and 7 deletions
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue