fix(web): keep HTML prototype selection rings visible#23745

Approvability

Verdict: Needs Human Approval

Macroscope's review found this PR requires human approval — The fix is narrowly scoped and includes an iframe regression test, but it changes the default CSS and layout guidance applied to newly generated HTML pages. That product-default behavior change warrants explicit review despite the small diff.

^{You can add or adjust custom eligibility rules. Learn more.}

Review in Change Stack →

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}

thanks @stevan-borus. the overridable root gutter and border-box sizing fix the clipping without changing keyboard focus. i kept your commit and merged current main (dd5b5401e1), combined your regression with main's existing iframe test, and reduced the guidance update to one sentence. the final diff is two files, 109 additions and 1 deletion.

verification on 5277dcf4c04ea1ecd5afc8b689371e78425c8c93:

• reproduced the regression against main's css: expected -5 to be greater than or equal to 0.
• blacksmith vp run check:changed origin/main passed format, lint, both knip passes, 29 affected-package typechecks, and all 13 focused tests.
• published matching HTML through HtmlRender.publish and loaded its signed attachment in the real app. clicking the first and last cards leaves 3px clearance at all four frame edges. desktop/dark and phone/light fit the 256px page without horizontal overflow.
• keyboard focus remains 2px with a -2px offset; authored html{padding:24px} overrides the gutter through a theme update. root width:100% does not overflow. fullscreen open/close passed.
• two independent read-only reviews approved this exact head with no findings.
• ci passed build/typecheck, lint, package tests, all eight server shards, release smoke, and native fingerprint. after one rerun, the web suite has 4,591/4,593 passing tests; two unchanged Word-preview tests time out in AttachmentFilePreview.browser.test.tsx (default template styles and binary package properties). current main also fails in that same file, in other Word-preview cases. takeover ci remains blocked on that existing viewer suite. no unrelated viewer changes were added.
• coderabbit reported a usage limit rather than findings. both independent reviews approved the exact head. macroscope still calls for human approval of this product default.
• uploaded images were downloaded and byte-checked; the uploaded video played and sought correctly in chrome. cafe renders external media as links; inline media rendering there is unavailable. task dev processes and the blacksmith worker are stopped.
• unverified: native mobile, electron, and a provider-cli-generated turn. the app captures use a disposable tool-output fixture. existing stored pages retain their original styles until regenerated.

main before, desktop:

desktop before: selection ring clipped at the iframe edges

updated branch, desktop:

desktop after: complete selection ring inside the fitted iframe

main before, phone width:

phone before: selection ring clipped at the iframe edges

updated branch, phone width:

phone after: complete selection ring inside the fitted iframe

first/last selection and inset keyboard focus in the app:

selecting edge cards and moving keyboard focus

merged current main (becf853defb6) cleanly and pushed 8a030080bd86229467ac8851d6e4567535c6e94d to the existing fork branch without force. the diff remains two files, 109 additions and 1 deletion. no source fixes or unrelated viewer changes were needed.

blacksmith vp run check:changed github/main passed format, lint, both knip passes, all 30 affected-package typechecks, and all 13 focused tests. chrome with the actual HtmlRenderDocument component also passed first/last card selection: 3px clearance at the frame edges and no horizontal overflow. both independent read-only reviews approved this exact head with no findings. prior before/after evidence remains applicable because the implementation is unchanged.

the old failed CI log contains two Word-preview timeouts, outside this diff. main's latest CI passed. fresh CI is pending on the merged head. native mobile, electron, and a provider-cli-generated turn were not exercised this pass.

Verified in a real dev environment

verified as-is at 8a030080bd86229467ac8851d6e4567535c6e94d on this disposable linux boat vm. no source changes or pushes.

• installed and ran github/main (feb2e32de6925dc0b55569f345094f26b018ebc4) in a separate worktree, then stopped its captured process group before starting the exact pr head. both used isolated state and vp i.
• used repo playwright with /usr/bin/google-chrome. through each running web app, added the real t3code git repository and submitted a real codex gpt-6.1-sol turn. each agent published identical interactive html through html_render; no mock, fixture, seeded conversation, or direct database writes.
• clicked first and last cards at 1440px desktop and 390px phone viewport widths. main clips the 3px selection outline with 2px offset by 5px. the pr leaves 3px clearance at the frame edges. the fitted iframe grows from 240px to 256px and matches document height. scroll width equals viewport width (728px desktop, 358px phone), with no horizontal overflow.
• tab moves focus to the next card with the unchanged 2px outline and -2px inset; enter selects it. fullscreen opens, zoom reaches 125%, and close preserves the inline selection. switching the actual app appearance to dark also preserves the gutter and complete ring.
• blacksmith: installed dependencies and browser prerequisites, then ran vp test run apps/web/src/components/files/BrowserDocumentFrame.browser.test.tsx packages/shared/src/htmlRender.test.ts: 2 files, 13 tests passed. the current head also has 27 successful ci contexts, zero failing or pending.
• inspected the captures, checked uploaded bytes against originals, and played the uploaded 9.88s recording to completion and sought in t3's browser player.

main, desktop:

main: orchid selection ring clipped at the iframe edges

pr, matching desktop data:

pr: orchid selection ring fully visible inside the iframe

main, phone width:

main at 390px: clipped selection ring

pr, matching phone data:

pr at 390px: complete selection ring

pr, dark appearance:

pr in dark mode: complete selection ring

selection, keyboard focus, fullscreen and zoom:

real app interaction recording

Not verified

native ios/android and electron, including macos/windows-specific behavior, were not exercised on this linux vm. other provider adapters and remote/relay connections were not exercised. existing stored html keeps its embedded styles until regenerated.

html_preview was attempted through the real provider on both main and the pr and failed with: "Headless Chrome could not render the page: the page did not finish loading within 20 seconds." successful screenshot preview generation is therefore unverified here. html_render still published, and its actual client iframe and interactions passed on both branches. the recording includes the vm's cpu-overload notification; no performance claim is made.

github renders the five screenshots inline but does not embed this external mp4 image markup. the uploaded recording itself plays and seeks in t3's player; inline github video playback is unavailable. task dev servers, chrome, and the blacksmith worker are stopped.