fix(app): autoResize collapses height:100% layouts; expose autoResize in useApp by ochafik · Pull Request #619 · modelcontextprotocol/ext-apps

ochafik · 2026-04-20T18:52:54Z

Problem

setupSizeChangedNotifications measured content height by transiently setting html.style.height = "max-content". During that synchronous reflow, any descendant with height: 100% resolves to auto (the parent now has indefinite/intrinsic size). Apps that use the common html, body { height: 100% } reset with a viewport-filling child therefore reported a spinner-sized height on first measure — and once the host shrank the iframe, the layout never recovered (the 100% child now fills a tiny iframe, so ResizeObserver sees no further change).

Fix

Measure document.body.scrollHeight + vertical body margins instead of overriding <html> styles.

Case	Before (`max-content` override)	After (`body.scrollHeight`)
Default-styled body, content < viewport	shrinks ✅	shrinks ✅ (#57 preserved)
Content > viewport	grows ✅	grows ✅ (#525 preserved)
`html,body{height:100%}` + `100%` child	collapses to spinner ❌	reports viewport height ✅
`body{height:100%}` + short content	shrinks	stays at viewport height — semantically correct for a "fill viewport" layout

The last row is the only behavior change for previously-working apps, and it's arguably the right behavior: an app that declares body { height: 100% } is asking to fill the viewport, not shrink-wrap. Apps that need explicit control should pass { autoResize: false }.

Also

Expose autoResize in UseAppOptions so React apps can opt out without abandoning the useApp() hook (autoResize: true default causes layout bugs — need height management guidance #502 proposal 2).

Addresses

setupSizeChangedNotifications reports size before content is ready, causing widgets to collapse #143 (collapse bug — root-caused by @kashtian)
fix: defer initial size measurement to ResizeObserver #189 (alternative fix removed the immediate measure; this keeps it but makes it non-destructive)
autoResize: true default causes layout bugs — need height management guidance #502 (proposal 2: useApp({ autoResize: false }))

… in useApp setupSizeChangedNotifications measured height by transiently forcing html.style.height = "max-content". During that reflow, descendants with height:100% resolve to auto (parent has no definite size), so apps that set html,body{height:100%} with a viewport-filling child reported a spinner-sized height — and never recovered once the iframe shrank. Measure body.scrollHeight + body margins instead. This still grows on overflow (#525) and shrinks for default-styled bodies (#57), without overriding author styles. Apps that explicitly set body{height:100%} no longer shrink below the host's initial size, which is the semantically correct behavior for a viewport-filling layout. Also expose `autoResize` in UseAppOptions so React apps can opt out without dropping the hook. Addresses #143, #189, #502.

github-actions · 2026-04-20T18:54:09Z

📖 Docs Preview Deployed


Preview (stable)	https://pr-619.mcp-ext-apps-docs-preview.pages.dev
This commit	https://01269ec7.mcp-ext-apps-docs-preview.pages.dev
Commit	`d630c60`

Includes drafts and future-dated posts. All pages served with noindex, nofollow — search engines will not crawl this preview.

pkg-pr-new · 2026-04-20T18:56:11Z

Open in StackBlitz

@modelcontextprotocol/ext-apps

npm i https://pkg.pr.new/@modelcontextprotocol/ext-apps@619

@modelcontextprotocol/server-basic-preact

npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-preact@619

@modelcontextprotocol/server-basic-react

npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-react@619

@modelcontextprotocol/server-basic-solid

npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-solid@619

@modelcontextprotocol/server-basic-svelte

npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-svelte@619

@modelcontextprotocol/server-basic-vanillajs

npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-vanillajs@619

@modelcontextprotocol/server-basic-vue

npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-vue@619

@modelcontextprotocol/server-budget-allocator

npm i https://pkg.pr.new/@modelcontextprotocol/server-budget-allocator@619

@modelcontextprotocol/server-cohort-heatmap

npm i https://pkg.pr.new/@modelcontextprotocol/server-cohort-heatmap@619

@modelcontextprotocol/server-customer-segmentation

npm i https://pkg.pr.new/@modelcontextprotocol/server-customer-segmentation@619

@modelcontextprotocol/server-debug

npm i https://pkg.pr.new/@modelcontextprotocol/server-debug@619

@modelcontextprotocol/server-map

npm i https://pkg.pr.new/@modelcontextprotocol/server-map@619

@modelcontextprotocol/server-pdf

npm i https://pkg.pr.new/@modelcontextprotocol/server-pdf@619

@modelcontextprotocol/server-scenario-modeler

npm i https://pkg.pr.new/@modelcontextprotocol/server-scenario-modeler@619

@modelcontextprotocol/server-shadertoy

npm i https://pkg.pr.new/@modelcontextprotocol/server-shadertoy@619

@modelcontextprotocol/server-sheet-music

npm i https://pkg.pr.new/@modelcontextprotocol/server-sheet-music@619

@modelcontextprotocol/server-system-monitor

npm i https://pkg.pr.new/@modelcontextprotocol/server-system-monitor@619

@modelcontextprotocol/server-threejs

npm i https://pkg.pr.new/@modelcontextprotocol/server-threejs@619

@modelcontextprotocol/server-transcript

npm i https://pkg.pr.new/@modelcontextprotocol/server-transcript@619

@modelcontextprotocol/server-video-resource

npm i https://pkg.pr.new/@modelcontextprotocol/server-video-resource@619

@modelcontextprotocol/server-wiki-explorer

npm i https://pkg.pr.new/@modelcontextprotocol/server-wiki-explorer@619

commit: 08cb723

ochafik · 2026-04-21T13:52:59Z

Closing — the safe half of this (exposing autoResize in useApp) shipped separately as #622. The remaining app.ts measurement change (max-content → body.scrollHeight + margins) touches the auto-resize path that every existing app relies on, and needs validation across the example matrix and real hosts (Claude.ai web/Desktop/iOS, VS Code) before landing.

Tracking the underlying #143 bug separately; in the meantime the workaround is new App(..., { autoResize: false }) (or useApp({ autoResize: false }) as of #622) plus a manual app.sendSizeChanged() once content is ready.

ochafik · 2026-04-21T13:55:00Z

Reopening as draft. The bug is real (#143 has two reporters and a root-cause from @kashtian pointing at exactly this max-content override), and the useApp opt-out already shipped via #622 — but the measurement change here touches every app's default resize path, so it needs validation before merge:

Rebase onto main (currently conflicts with feat(react): forward autoResize from useApp to App #622's useApp.tsx; drop that hunk, keep app.ts only)
e2e screenshot diffs across all 24 example servers
Manual check in Claude.ai web + Desktop + iOS
Verify the open-sky-mcp repro from setupSizeChangedNotifications reports size before content is ready, causing widgets to collapse #143 is actually fixed
Verify Fix autoResize reporting viewport height when content is taller than iframe #525 (grow on overflow) and Fix iframe sizing to use actual content dimensions #57 (shrink to fit) regressions don't reappear

ochafik · 2026-04-21T14:10:44Z

@mel-anthropic could you take a look? This touches the height path you deliberately kept as max-content in #567 ("the height measurement is preserved since hosts rely on it").

Context: #143's comment from @kashtian root-causes the height:100%-collapse to the html.style.height = "max-content" override that #525 introduced. This PR swaps it for body.scrollHeight + margins (no style mutation), which should still satisfy #525's grow-past-viewport case via overflow — but I'd like your read on:

what "hosts rely on it" referred to in Fix auto-resize destroying horizontal scroll positions #567 (iOS height handling?), and
whether scrollHeight behaves on iOS the way it does on desktop.

Would be great to validate on mobile alongside the e2e screenshot pass before this comes out of draft.

ochafik closed this Apr 21, 2026

ochafik mentioned this pull request Apr 21, 2026
setupSizeChangedNotifications reports size before content is ready, causing widgets to collapse #143
Open

ochafik reopened this Apr 21, 2026

ochafik marked this pull request as draft April 21, 2026 13:54

ochafik mentioned this pull request Apr 21, 2026
autoResize: true default causes layout bugs — need height management guidance #502
Open

rgbkrk mentioned this pull request May 26, 2026
fix(mcp-app): use shared full-height output sizing nteract/nteract#2985
Merged

plmercereau mentioned this pull request Jun 10, 2026
autoResize misses absolutely-positioned portal growth (popover opens → no size-changed) #686
Open

Navigation Menu

Uh oh!

fix(app): autoResize collapses height:100% layouts; expose autoResize in useApp - #619

fix(app): autoResize collapses height:100% layouts; expose autoResize in useApp#619
ochafik wants to merge 1 commit into
mainfrom
fix/autoresize-collapse

ochafik commented Apr 20, 2026

Uh oh!

github-actionsBot commented Apr 20, 2026

Uh oh!

pkg-pr-newBot commented Apr 20, 2026

Uh oh!

ochafik commented Apr 21, 2026

Uh oh!

ochafik commented Apr 21, 2026

Uh oh!

ochafik commented Apr 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

ochafik commented Apr 20, 2026

Problem

Fix

Also

Addresses

Uh oh!

github-actionsBot commented Apr 20, 2026

📖 Docs Preview Deployed

Uh oh!

pkg-pr-newBot commented Apr 20, 2026

Uh oh!

ochafik commented Apr 21, 2026

Uh oh!

ochafik commented Apr 21, 2026

Uh oh!

ochafik commented Apr 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant