fix(web): let HTML pages fill the full viewport#20
Merged
Conversation
The shell's `#app` container has a `max-width: 640px` cap (set in index.html for A2UI/landing layouts). HTML pages were inheriting it and rendering as a narrow ~640px column with the body gradient showing on both sides, regardless of viewport width. Fix: flip an `is-html` class on `#app` when the format is HTML, and add it to the existing `#app.is-home, #app.is-html` rule that clears the cap. Same escape hatch the home page already uses via `is-home`. No security implications. Iframe sandbox, CSP, sanitizer, chrome bar all unchanged. The agent's own page CSS (max-width, padding) still applies inside the iframe — this just removes our renderer's outer constraint on the iframe itself.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Symptom
https://pagent.link/<id>for an HTML page renders as a narrow ~640 px column centered on a 1200 px viewport, with the body gradient showing on both sides. The agent's CSS (max-width, padding) further constrains the content inside the iframe, but the outer 640 px cap was ours.Root cause
apps/web/index.htmlsets#app { max-width: 640px; margin: 0 auto; padding: ... }for A2UI/landing layouts. The home page already opts out via#app.is-home { max-width: none; margin: 0; padding: 0; }. HTML pages had no equivalent escape hatch and inherited the 640 px cap.Fix
apps/web/main.ts: whenformat === 'html', addis-htmlto#app.apps/web/index.html: extend theis-homecap-clearing rule to coveris-html.#app.is-home, #app.is-html { max-width: none; margin: 0; padding: 0; }Test plan
npm run typecheck,npm test(237 pass),npm run build:web— green