fix: include portal content in auto-resize

[federgilad]

Summary

Fixes #686.

Automatic app resizing previously measured only the intrinsic html height. Out-of-flow UI rendered through portals, such as menus, dialogs, and popovers, does not contribute to that height, so hosts could keep the iframe too short and clip the portal content.

This change:

• includes the visible bottom edge of out-of-flow descendants in the reported height
• observes document mutations so portal insertion, movement, and removal trigger a measurement
• respects ancestor overflow clipping, so content inside a fixed-height scroll container does not incorrectly expand the iframe
• keeps the existing requestAnimationFrame debounce and size deduplication
• disconnects both observers and cancels pending animation work during cleanup

Before

A real Chromium reproduction with 100px of in-flow content and an absolutely positioned portal from 300px to 400px emitted only:

[{"width":1280,"height":100}]

The host therefore had no signal that the portal extended to 400px.

After

The Playwright regression exercises initial layout, portal insertion, portal movement, portal removal, clipped scroll content, deduplication, and cleanup. Its height sequence is:

[100, 400, 600, 100]

Replacing the content with a 100px overflow: auto container whose child is 1000px tall emits no spurious 1000px resize. Re-inserting the portal after cleanup emits no notification.

Validation

• npm run build
• npm test: 374 passed, 1 skipped, 0 failed
• EXAMPLE=say-server npx playwright test tests/e2e/auto-resize.spec.ts --project=chromium --reporter=line: 1 passed
• npx prettier --check src/app.ts tests/e2e/auto-resize.spec.ts
• repository pre-commit hooks, including all example builds

Tradeoffs and risk

Measuring portal extent requires inspecting rendered descendant bounds. The work is coalesced to at most one measurement per animation frame, and computed styles are read only for elements with descendants where a clipping boundary could affect their children. Existing width behavior and protocol messages are unchanged.

The mutation observer watches structure, text, and attributes because portal geometry can change without resizing html or body. Observer records caused by the temporary intrinsic-height style are drained after measurement to avoid feedback loops.

No untrusted data is evaluated or transmitted; the change only reads local layout geometry and reports the same width/height notification shape as before.

[federgilad]

Visual verification

A realistic popover reproducer with identical app content and host viewport in both captures. The host conversation continues immediately below the MCP app iframe, making the clipping boundary explicit.

Before	After

Before, only the popover heading is visible and its actions are clipped. After, auto-resize includes the portal wrapper, leaves the full popover and its shadow visibly inside the iframe, and moves subsequent host content down. The Playwright regression remains the executable evidence for growth, movement, removal, overflow clipping, deduplication, and cleanup.

[Copilot]

Pull request overview

Improves the SDK’s automatic iframe sizing so App.setupSizeChangedNotifications() accounts for out-of-flow “portal” UI (menus/popovers/dialogs) that doesn’t affect the intrinsic html height, and adds an E2E regression to cover portal insert/move/remove, overflow clipping, deduplication, and cleanup.

Changes:

• Extend height measurement to consider the bottom edge of out-of-flow descendants, with overflow-clipping propagation.
• Add a MutationObserver trigger path (alongside ResizeObserver) and ensure cleanup disconnects observers and cancels pending animation work.
• Add a Playwright E2E regression test validating the expected height sequence and cleanup behavior.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/app.ts	Enhances auto-resize measurement/triggering to include out-of-flow descendants and DOM mutations, with rAF coalescing and cleanup.
tests/e2e/auto-resize.spec.ts	Adds an E2E regression that reproduces portal growth/movement/removal and verifies no spurious expansion for clipped scroll content or after cleanup.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.