fix(web): align mobile onboarding header

[t3-code]

summary

aligns the hosted static onboarding header with the collapsed sidebar toggle on mobile by using the shared 52px workspace topbar geometry instead of route-specific vertical padding.

adds regression coverage so the onboarding header keeps the shared topbar class and does not reintroduce vertical padding utilities.

before

production app.t3.codes measured the header at 37px with 8px vertical padding.

after

the fixed build measures the header at 52px with centered content and no vertical padding.

verification

• vp run --filter @t3tools/web test (236 files, 2201 tests passed)
• vp run --filter @t3tools/web typecheck
• vp lint apps/web/src/routes/_chat.index.tsx apps/web/src/routes/-chatIndexTitlebar.test.ts
• vp fmt --check apps/web/src/routes/_chat.index.tsx apps/web/src/routes/-chatIndexTitlebar.test.ts
• vp run --filter @t3tools/web build
• playwright mobile viewport visual check at 390x844

built with gpt-5.6-sol via hermes agent.

request provenance

• requested by: @UtkarshUsername (Utkarsh on Discord)
• source: Discord request

---

Note

Low Risk
Minor UI class change on the onboarding header plus a source-level regression test; no auth, data, or behavioral logic changes.

Overview
Aligns the hosted static onboarding header with the shared 52px workspace-topbar geometry so the title vertically centers with the collapsed sidebar toggle on mobile.

Removes route-specific py-* padding from HostedStaticOnboardingState and adds a regression test that asserts the header keeps workspace-topbar and does not reintroduce vertical padding utilities.

^{Reviewed by Cursor Bugbot for commit 864cca2. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Align mobile onboarding header using workspace-topbar class in HostedStaticOnboardingState

Replaces py-2/sm:py-3 padding utilities on the <header> element with the workspace-topbar class in _chat.index.tsx. A test in chatIndexTitlebar.test.ts verifies the header includes workspace-topbar and forbids any py- classes.

^{Macroscope summarized 864cca2.}

[t3-code]

@UtkarshUsername done. the mobile onboarding header now uses the shared 52px topbar geometry, and the pr includes separate before and after screenshots.

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 3b06195. Configure here.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	11.3 KiB	11.3 KiB	+23 B (+0.2%)	15.1 KiB	✅
Codex	Thread snapshot wire	5.5 KiB	5.5 KiB	+3 B (+0.1%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	5.9 KiB	5.9 KiB	+20 B (+0.3%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	49.7 KiB	49.7 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	16	16	0 (0.0%)	21	✅
Claude	Total thread wire	11.3 KiB	11.3 KiB	−12 B (−0.1%)	15.1 KiB	✅
Claude	Thread snapshot wire	5.5 KiB	5.5 KiB	+1 B (+0.0%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	5.9 KiB	5.9 KiB	−13 B (−0.2%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	50.6 KiB	50.6 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	16	16	0 (0.0%)	21	✅

Baseline: e1378a1 · PR result: 864cca2 · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 94.6 KiB
• Claude decoded thread snapshot: 95.4 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[macroscopeapp]

Approvability

Verdict: Approved 864cca2

This is a straightforward CSS styling fix that replaces custom padding classes with a shared workspace-topbar class to ensure consistent header alignment. The accompanying test provides regression coverage. No runtime behavior changes - purely visual alignment.

^{You can customize Macroscope's approvability policy. Learn more.}