trends.stumason.dev
TypeScript
Pull Request Opened
PR #132 opened: fix(mcp): set iframe height via inline style on <html> after render
Summary
PR #131's CSS-only fix wasn't enough — Compare/Neighborhood cards still rendered at ~300px tall in Claude.ai. Per anthropics/claude-ai-mcp#69, the host reads `iframe.contentDocument.documentElement.style.height` as an inline attribute, not CSS. The bug reporter confirmed: hardcoding `document.documentElement.style.height = "900px"` immediately grows the iframe; CSS `min-height` does nothing.
This change adds a `syncHeight()` helper that:
- Measures `scrollHeight` of both `body` and `documentElement`, takes the max with a floor of 800px
- Writes it as an inline style on `` (`document.documentElement.style.height`)
- Runs inside `requestAnimationFrame` so the measurement is taken after layout has settled
Called after every tool-result render and once at app init so the empty state reports a sensible height before Claude.ai's first snapshot.
Test plan
- Merge, deploy
- Re-run the AI coding agents brief prompt
- Confirm Compare card renders tall enough to show all five scorecards without an internal scrollbar
- Confirm Neighborhood card shows the full top-20 term list
+24
additions
-3
deletions
1
files changed