fix(web): resize the floating preview from any edge

[juliusmarminge]

Problem

The floating browser preview could only be resized from a single grip in its bottom-right corner — the one corner that runs into the window edge, so there was often nowhere left to drag toward. It also opened at a fixed 320×200 box regardless of what it was previewing, so the webview was letterboxed inside a padded frame instead of filling it.

Fix

• Resize from any edge or corner. Eight invisible grab zones straddle the player's edges; the resize cursor is the only affordance, since resizability is the expected state and doesn't need its own chrome.
• Aspect ratio follows the previewed viewport. The player is sized from what it actually mirrors — the device viewport when one is set, otherwise the size the webview had when it was floated — so the webview fills the frame with no padding. Resizing holds that ratio.
• The opposite edge stays anchored. Dragging the left edge grows leftward, the top grows upward, and so on, so growth never dead-ends against the window edge. On a plain edge drag the perpendicular axis may use the whole container and the player shifts to stay inside.
• Width is the only stored dimension. The on-screen frame is derived per layout pass from the measured container instead of being clamped back into the store, so a temporarily narrow window no longer destroys the size you chose. The player also never grows past the source's own rendered size, where it would only upscale.

Verification

apps/web focused tests, lint and typecheck pass. The geometry is covered by behavioral tests in previewMiniPlayerLayout.test.ts: aspect-locked resize from each edge, the anchored opposite edge, corner drags following the dominant axis, stopping at the container edge, shifting on the free axis, the minimum size, and the 1:1 cap.

CleanShot.2026-09-06.at.20.47.57.mp4

Notes

The old corner grip was a focusable button with no key handler, so it was never keyboard-operable; the new rails are pointer-only in the same way. Keyboard resize for the floating player remains unimplemented, as it was before.

Model: Claude Opus 5 (1M context), harness: Claude Code in T3 Code.

Summary by CodeRabbit

• New Features

  • Mini-player sizing now adapts to the preview content, viewport zoom, and available space.
  • Resize the player from any edge or corner while preserving the preview’s aspect ratio.
  • Drag and reposition the player smoothly within the preview area.
  • Unpositioned players now appear in the top-right by default.

• Bug Fixes

  • Improved handling of minimum sizes, viewport boundaries, bottom spacing, and oversized previews.
  • Resizing now maintains consistent dimensions and positioning across different preview layouts.

[cursor]

Bugbot is paused — on-demand spend limit reached

Bugbot uses usage-based billing for this team and has hit its on-demand spend limit.

A team admin can raise the spend limit in the Cursor dashboard, or wait for the next billing cycle to continue.

[cursor]

Bugbot is paused — on-demand spend limit reached

Bugbot uses usage-based billing for this team and has hit its on-demand spend limit.

A team admin can raise the spend limit in the Cursor dashboard, or wait for the next billing cycle to continue.

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — The change adds eight production resize interaction paths, derives the preview frame from viewport aspect ratio, and replaces the fixed initial 320x200 layout with a dynamic default. It also changes the live mini-player state model, so the visible behavior spans interaction handling, layout calculations, browser-surface sizing, and state management.

Not approved because:

• Monthly spending limit reached (workspace setting). Approvability relies on correctness review in order to determine eligibility

^{Review your spending limits in Billing settings. You can add or adjust custom eligibility rules. Learn more.}

[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	13.5 KiB	13.6 KiB	+64 B (+0.5%)	15.1 KiB	✅
Codex	Thread snapshot wire	7.0 KiB	7.0 KiB	+5 B (+0.1%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.5 KiB	6.6 KiB	+59 B (+0.9%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	57.0 KiB	57.1 KiB	+88 B (+0.2%)	66.4 KiB	✅
Codex	Live turn messages	8	10	+2 (+25.0%)	21	✅
Claude	Total thread wire	13.6 KiB	13.6 KiB	0 B (0.0%)	15.1 KiB	✅
Claude	Thread snapshot wire	7.0 KiB	7.1 KiB	+7 B (+0.1%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.6 KiB	6.6 KiB	−7 B (−0.1%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	57.9 KiB	57.9 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	10	10	0 (0.0%)	21	✅

Baseline: 6abdf37 · PR result: e094155 · 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: 113.9 KiB
• Claude decoded thread snapshot: 114.6 KiB

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 7efaf853-063f-4079-b6cd-95fe457d9be2

📥 Commits

Reviewing files that changed from the base of the PR and between 6abdf37 and e094155.

📒 Files selected for processing (5)

• apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx
• apps/web/src/components/preview/previewMiniPlayerLayout.test.ts
• apps/web/src/components/preview/previewMiniPlayerLayout.ts
• apps/web/src/previewMiniPlayerStore.test.ts
• apps/web/src/previewMiniPlayerStore.ts

Included review availability: 8 reviews are currently available. Your included PR review attempts over the past 7 days set your current allowance at 10 reviews per hour.

---

📝 Walkthrough

Walkthrough

The mini-player now stores width separately from height, derives aspect-ratio-aware frames from viewport content, and supports unified drag and eight-direction resize gestures within container constraints.

Changes

Mini-player frame management

Layer / File(s)	Summary
Width-based state contract apps/web/src/previewMiniPlayerStore.ts, apps/web/src/previewMiniPlayerStore.test.ts	The store persists a nullable width instead of a size object. Resize operations accept numeric widths and preserve thread-specific state.
Frame resolution and resizing apps/web/src/components/preview/previewMiniPlayerLayout.ts, apps/web/src/components/preview/previewMiniPlayerLayout.test.ts	Layout utilities resolve source dimensions, initialize constrained frames, preserve aspect ratio, anchor directional resizes, and enforce minimum, container, and bottom-inset limits.
Unified gesture rendering apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx	The component measures its container, uses one pointer-gesture model for dragging and resizing, captures pointers, and renders the player from the resolved frame.

Estimated code review effort: 4 (Complex) | ~45 minutes

Merge Risk: ⚪ Minimal · up to e0941

The mini-player gains aspect-ratio-aware resizing from every edge and corner, with source and container limits enforced. No actionable merge-blocking risk remains.

Sequence Diagram(s)

sequenceDiagram
  participant Pointer
  participant ThreadPreviewMiniPlayer
  participant previewMiniPlayerLayout
  participant previewMiniPlayerStore

  Pointer->>ThreadPreviewMiniPlayer: Start drag or resize
  ThreadPreviewMiniPlayer->>previewMiniPlayerLayout: Resolve or resize frame
  previewMiniPlayerLayout-->>ThreadPreviewMiniPlayer: Return constrained frame
  ThreadPreviewMiniPlayer->>previewMiniPlayerStore: Store width and position
  ThreadPreviewMiniPlayer-->>Pointer: Render updated player

Loading

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 57.14% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 7 functions across 5 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
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.
Description check	✅ Passed	The description clearly explains the problem, implementation, UI behavior, and verification. It does not use the template headings exactly and omits the checklist, but it provides the required technic…
Title check	✅ Passed	The title accurately and concisely describes the primary change: enabling resizing of the floating preview from any edge.

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-browser-overlay-resizing

---

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