fix(web): consolidate header actions into overflow menu on mobile

[henrik092]

On mobile viewports the chat header renders all action buttons (terminal, diff, open-in, git, scripts) inline, which overflows the narrow screen and makes the title unreadable.

Wrap the action buttons in a Popover behind an ellipsis button when isMobile is true. Desktop layout is completely unchanged.

Uses existing useIsMobile() hook, Button, and Popover primitives already established in the codebase.

Related #1441

What Changed

Why

UI Changes

---

Note

Low Risk
Low risk UI-only change that conditionally alters rendering on mobile viewports; main risk is minor UX/regression in action discoverability or popover layout on small screens.

Overview
On mobile viewports, ChatHeader now collapses the header action controls into an ellipsis-triggered Popover to prevent the title from being pushed off-screen.

The popover contains the existing Terminal/Diff toggles plus project-scoped actions (Open In picker, Git actions, and project scripts) when available, while the desktop/non-mobile inline layout and tooltips remain unchanged.

^{Written by Cursor Bugbot for commit 9915bb9. This will update automatically on new commits. Configure here.}

Note

Consolidate chat header actions into overflow menu on mobile

On mobile viewports, the right-side controls in ChatHeader.tsx are now grouped behind a 'More actions' popover (EllipsisIcon button), containing Terminal/Diff toggles and any applicable project controls. Desktop layout is unchanged. Labels replace tooltips inside the popover to suit the mobile context.

^{Macroscope summarized 9915bb9.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: de0519be-4c4e-47f8-b8b4-90c9c2062bfd

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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