Fix PR branch selector overflow

[theinfosecguy]

Summary

Keep long base and compare branch names inside the pull request creation form.

Why

Primer buttons use min-width: max-content by default, so long branch names can push a selector past the form boundary instead of truncating.

Fixes #2979

What changed

• Allow branch selector buttons and their content to shrink within the form.
• Apply ellipsis to the branch text while preserving the full accessible name and both icons.

MCP impact

• No tool or API changes

This only changes the MCP App layout.

Prompts tested (tool changes only)

Not applicable. No tool behavior changed.

Security / limits

• No security or limits impact

This is a responsive styling fix.

Tool renaming

• I am not renaming tools as part of this PR

Lint & tests

• Linted locally with ./script/lint
• Tested locally with ./script/test
• Ran cd ui && npm run typecheck
• Ran script/build-ui
• Browser tested branch selectors from 240 px to 1600 px with short, long, Unicode, RTL, and empty branch states. Also verified filtering, selection, keyboard controls, resizing, dark mode, and pull request submission.

Docs

• Not needed

[Copilot]

Pull request overview

Fixes branch selector overflow in the pull request creation form.

Changes:

• Allows selector buttons and content to shrink.
• Truncates long branch names while preserving icons and accessible text.

Show a summary per file

File	Description
ui/src/apps/pr-write/App.tsx	Adds reusable responsive styles to both branch selectors.

Review details

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

• Files reviewed: 1/1 changed files
• Comments generated: 0
• Review effort level: Balanced