fix(web): browser device toolbar no longer clips size field focus rings

[aaaxn]

What Changed

Raised BROWSER_DEVICE_TOOLBAR_HEIGHT from 32px to 37px and updated the layout tests that pin the guest offset and framed area.

Why

The device toolbar in the desktop in-app browser is a horizontal scroll container, so it also clips vertically. Its 32px border-box height (31px of content above the 1px divider) held the 30px compact width/height inputs with about half a pixel to spare, so their 3px focus ring was cut off on the top and bottom.

37px leaves 36px of content: the 30px control plus the full 3px ring on each side. The guest webview is positioned from the same constant (resolveBrowserDeviceViewportLayout), so it moves down with the toolbar instead of overlapping it or leaving a gap. Only the desktop Electron host renders this toolbar; web and mobile are unaffected.

Tested with vp test run apps/web/src/browser/browserViewportLayout.test.ts (the updated expectations fail on the old height), targeted lint, the @t3tools/web typecheck, and by focusing the viewport height field in vp run dev:desktop on macOS.

Closes #13607

UI Changes

Before:

After:

Written with the help of an AI agent: Claude Opus 5.5 via Claude Code, running in T3 Code.

Summary by CodeRabbit

• Bug Fixes
  • Updated the device viewport layout to account for the taller toolbar, keeping the displayed viewport dimensions and vertical positioning accurate.

[macroscopeapp]

Approvability

Verdict: Approved at 3a6d044

Macroscope's review found this PR approvable — This is a narrowly scoped browser-toolbar layout fix: it adds 5px of height so input focus rings are not clipped and correspondingly adjusts the guest viewport offset and available height. The production impact is localized and covered by updated layout tests, with no product-setting, schema, infrastructure, or static-analysis changes.

Notes:

• Diff unchanged. Approvability was decided on eligibility alone.

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

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 0833f854-7755-4e5f-9767-9fe76699ad54

📥 Commits

Reviewing files that changed from the base of the PR and between d06f0ff and 3a6d044.

📒 Files selected for processing (2)

• apps/web/src/browser/browserViewportLayout.test.ts
• apps/web/src/browser/browserViewportLayout.ts

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

The browser device toolbar height increases from 32px to 37px. Device-layout and responsive viewport-size test expectations change to match the updated height.

Changes

Device viewport layout

Layer / File(s)	Summary
Toolbar height and viewport expectations apps/web/src/browser/browserViewportLayout.ts, apps/web/src/browser/browserViewportLayout.test.ts	The toolbar height changes to 37px. Tests expect a freeform viewport height of 853px, an offset of 37px, and responsive heights of 853px at scale 1 and 427px at scale 2.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~5 minutes

Change: Bug fix · Severity of issue fixed: Low

Merge Risk: ⚪ Minimal · up to 3a6d0

The toolbar reserves additional space for the size-field focus rings, with layout expectations updated accordingly. No material merge-blocking risk is evident.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Issue #13607 requires the custom viewport width and height field focus ring to remain fully visible. The PR raises BROWSER_DEVICE_TOOLBAR_HEIGHT from 32px to 37px. The comment documents space for th…
Out of Scope Changes check	✅ Passed	The PR changes only the shared browser device-toolbar height, its explanatory comment, and the related layout test expectations. These changes directly support issue #13607. No unrelated product behav…
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2…
Title check	✅ Passed	The title clearly identifies the browser device toolbar focus-ring clipping fix and matches the main change.
Description check	✅ Passed	The description explains what changed, why the change is needed, test coverage, scope, and UI differences with before-and-after screenshots. The checklist section is omitted, but the description is ot…

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

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

[juliusmarminge]

Note

Grok responding on behalf of Julius.

Closing as superseded. #13607 was fixed on main by #16961 (BROWSER_DEVICE_TOOLBAR_HEIGHT is already 38). This PR targeted the same issue with a 37px height and is no longer needed.