From a2df12410b755d76eb2cc8256ffe177e2bbedd1c Mon Sep 17 00:00:00 2001 From: "Alexandro T. Netto" Date: Fri, 15 May 2026 17:08:00 -0700 Subject: [PATCH] fix(web): let HTML pages fill the full viewport MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- apps/web/index.html | 3 ++- apps/web/main.ts | 7 +++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/apps/web/index.html b/apps/web/index.html index 2d5165d..2ec2744 100644 --- a/apps/web/index.html +++ b/apps/web/index.html @@ -56,7 +56,8 @@ margin: 0 auto; padding: var(--bb-grid-size-6) var(--bb-grid-size-3); } - #app.is-home { + #app.is-home, + #app.is-html { max-width: none; margin: 0; padding: 0; diff --git a/apps/web/main.ts b/apps/web/main.ts index 9a6dc4f..68e9801 100644 --- a/apps/web/main.ts +++ b/apps/web/main.ts @@ -283,6 +283,13 @@ class AgentUIApp extends SignalWatcher(LitElement) { // HTML pages are pre-sanitized server-side. We trust the byte-string // and wrap it in a sandboxed iframe. The iframe is opaque-origin and // JS-free; nothing it does can reach back into this shell. + // + // The shell's #app container has a 640px max-width cap (set in + // index.html for A2UI/landing layouts). HTML pages are meant to fill + // the full viewport like a normal webpage, so we flip the `is-html` + // class on #app to clear the cap — same escape hatch the home page + // uses via `is-home`. + document.getElementById('app')?.classList.add('is-html'); this.htmlBody = typeof page.spec === 'string' ? page.spec : ''; this.status = 'live'; return;