fix(ui): make toolbar mobile friendly

[gabrielmfern]

Summary

• on small screens, replace the toolbar tab strip with a compact dropdown switcher showing the current panel name plus a chevron; the menu lists all available panels with the active one highlighted and checked
• desktop keeps the original single-row text tabs with the animated underline indicator
• keep toolbar labels and the “Copy for AI” action on one line
• constrain the Copy for AI menu to the available viewport width and height
• show toolbar information on desktop hover only (mouse clicks are inert), and as a persistent popover on touch tap or keyboard activation
• dismiss the tap popover after outside interactions, including taps inside the email preview iframe, with a listener that self-clears if the component unmounts while open
• the info popover's open/close logic is fully inlined at the onOpenChange/onClick/onPointerDown handlers (no extracted top-level handler functions); the pointer-type tracking removes both its pointerup/pointercancel listeners on either terminal event so repeated interactions don't accumulate stale window listeners
• add a patch changeset for @react-email/ui

Testing

• pnpm exec biome check on changed files
• pnpm --filter @react-email/ui test (105 tests passed)
• Playwright at 375px: dropdown lists all five panels, fits the viewport, selecting Resend opens its panel and updates the trigger label, outside taps close the menu, and the collapsed toolbar shows the switcher strip
• Playwright at 1280px: text tabs render as before, the dropdown is hidden, and clicking tabs switches panels
• Playwright on both Chromium and WebKit: hover shows the info tooltip, a real mouse click stays inert, keyboard Enter opens the persistent popover, and clicking inside the email preview iframe closes it
• Playwright verified no error and normal behavior on a freshly mounted instance after unmounting the toolbar while the info popover was open and dispatching a synthetic blur
• Playwright confirmed (by instrumenting addEventListener/removeEventListener) that 5 real clicks and 5 simulated interrupted presses in a row leave no stray pointerup/pointercancel listeners on window

Mobile dropdown panel switcher open
Resend panel selected from the dropdown

_{To show artifacts inline, enable in settings.}

Slack Thread

  

---

Summary by cubic

Make the preview toolbar and Copy for AI menu responsive. On small screens, tabs collapse into a dropdown that shows the current panel; the info button uses hover on desktop and a persistent popover on touch/keyboard.

• Bug Fixes

  • Mobile dropdown lists available panels, reflects the active panel, and checks it; tabs fit narrow widths.
  • Keep toolbar labels and Copy for AI on one line; keep the active-tab underline aligned.
  • Constrain Copy for AI and info popover to the viewport with max size, scrolling, and collision padding.
  • Info popover opens only via touch/keyboard (mouse clicks are inert), reads pointer type on pointerdown for Safari, registers a blur listener on open, closes when the preview iframe gains focus, and cleans up blur and pointer listeners on close and unmount.

• Dependencies

  • Patch changeset for @react-email/ui.

^{Written for commit 9a80959. Summary will update on new commits.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
react-email	Ready	Preview, Comment	Jul 13, 2026 7:15pm
react-email-demo	Ready	Preview, Comment	Jul 13, 2026 7:15pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 9a80959

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@react-email/ui	Patch
react-email	Patch
@react-email/editor	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@react-email/ui@3650

commit: 9a80959

[cubic-dev-ai]

No issues found across 4 files

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

<sub>Auto-approved: CSS-only mobile responsiveness for toolbar tabs and actions; no logic changes, low risk.

Re-trigger cubic</sub>

[cubic-dev-ai]

0 issues found across 3 files (changes from recent commits).

<sub>Auto-approved: CSS-only mobile responsiveness changes: horizontal scroll for tabs, no-wrap on labels, viewport-constrained menu. No logic or data changes.

Re-trigger cubic</sub>

[felipefreitag]

hmm it didn't work that well, unfortunately - the spam and resend items are cut or hidden

[cubic-dev-ai]

0 issues found across 2 files (changes from recent commits).

<sub>Auto-approved: UI responsiveness improvements: horizontal scrolling tabs, popover for toolbar info, and text wrapping fixes. Isolated to UI package with no impact on core logic.

Re-trigger cubic</sub>

[cubic-dev-ai]

0 issues found across 1 file (changes from recent commits).

<sub>Auto-approved: Responsive layout and popover additions for toolbar, with tested CSS and logic changes limited to UI components.

Re-trigger cubic</sub>

[cubic-dev-ai]

All reported issues were addressed across 1 file (changes from recent commits).

<sub>Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic</sub>

Dismissed because Cubic found issues in a newer review.

[cubic-dev-ai]

All reported issues were addressed across 2 files (changes from recent commits).

<sub>Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic</sub>

[cubic-dev-ai]

All reported issues were addressed across 1 file (changes from recent commits).

<sub>Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic</sub>

[cubic-dev-ai]

All reported issues were addressed across 1 file (changes from recent commits).

<sub>Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic</sub>

[cubic-dev-ai]

All reported issues were addressed across 1 file (changes from recent commits).

<sub>Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic</sub>

[cubic-dev-ai]

All reported issues were addressed across 1 file (changes from recent commits).

<sub>Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic</sub>

[cubic-dev-ai]

0 issues found across 1 file (changes from recent commits).

<sub>Auto-approved: Adds responsive toolbar with mobile dropdown, updates info popover and Copy for AI menu constraints. Low-risk UI changes with tests passing.

Re-trigger cubic</sub>