fix(web): align floating browser preview corners

[caezium]

What Changed

Use one 12px radius for the floating browser preview's content, border, backdrop, and reconnecting placeholder. The surrounding layers inherit the radius from the preview frame.

Why

The browser surface already uses a fixed 12px corner radius, while the surrounding rounded-xl layers scale with the interface font. At 17px, the border radius becomes 14.625px, placing its curve inside the browser content and leaving a visible double edge. Sharing the existing content radius keeps all layers aligned across interface font sizes.

UI Changes

Captured from the actual T3 Code Electron app with an isolated profile and invented workspace, chat, and browser content. Iris dark theme, 17px interface font, 100% zoom, 1440 × 960 window. Each pair changes only this PR's fix.

Before	After

Full app captures

Before:

After:

Validation

• bun fmt
• bun lint
• bun typecheck (full workspace)
• From apps/web: bun run test src/components/preview/previewMiniPlayerLayout.test.ts src/browser/browserSurfaceStore.test.ts — 25 tests passed.
• Verified the actual built-in browser's floating preview with a 1280 × 800 sample page and a 360 × 225 preview frame. The border and content corners align after the change.

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for the UI change

No animation or interaction behavior changes; a video is not applicable.

Summary by CodeRabbit

• Style
  • Improved visual consistency by applying uniform corner rounding across the mini-player preview, including its background, border, and reconnecting overlay.
  • Kept the preview’s native and displayed edges aligned for a smoother, more polished appearance.

[macroscopeapp]

Approvability

Verdict: Approved at ccb340d

Macroscope's review found this PR approvable — This is a focused one-file UI fix that aligns the preview frame, browser content, backdrop, border, and reconnecting overlay to the same existing 12px radius. Geometry, interactions, and browser-surface behavior otherwise remain unchanged.

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 0c5f41ec-9716-43d3-a0f3-56320220d0fb

📥 Commits

Reviewing files that changed from the base of the PR and between ccb340d and 82866d9.

📒 Files selected for processing (1)

• apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx

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

---

📝 Walkthrough

Walkthrough

The mini-player now uses PREVIEW_MINI_PLAYER_CORNER_RADIUS for its container, browser surface, background, border, and reconnecting overlay.

Changes

Mini-player corner radius

Layer / File(s)	Summary
Centralize and apply corner radius apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx	Adds the shared radius constant and applies it to the section style, BrowserSurfaceSlot, background layer, ring border, and reconnecting overlay.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~5 minutes

Merge Risk: ⚪ Minimal · up to 82866

The change standardizes the mini-player preview corner radius across its visual layers, with no current evidence of a merge-blocking risk.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description clearly explains the change, the cause of the corner misalignment, the UI impact, validation steps, and checklist status. It includes before and after screenshots and correctly marks v…
Title check	✅ Passed	The title concisely and accurately describes the primary change: fixing corner alignment in the floating browser preview.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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