Problem

In PRCreateModal (the dialog opened by clicking New Pull Request on the project's PR list page), the From and Into branch dropdowns render with white text on a white background when the dark theme is active. The selected branch label is unreadable, and the dropdown popup that lists available branches has the same issue.

Where the bug is

components/pr/PRCreateModal.tsx, lines 115-125 (From) and 137-147 (Into):

<select
  value={sourceBranch}
  onChange={(e) => setSourceBranch(e.target.value)}
  className="flex-1 rounded-sm border-0 bg-transparent py-1 text-sm focus:outline-hidden focus:ring-0"
>
  {branches.map((branch) => (
    <option key={branch.name} value={branch.name}>
      {branch.name}
    </option>
  ))}
</select>

Two related issues:

1. The <select> element has bg-transparent and no text-* / dark:text-* class. The wrapping <div> at line 108 has dark:bg-slate-700/50 for its container, but the select inherits the document-level dark theme text color (white-ish) without the matching dark background being applied to the select itself.
2. The native <option> elements have no styling at all. In dark mode the browser still paints the dropdown popup with a white background by default, so any inherited dark-theme text color (white) renders white-on-white.

Proposed fix

Two parts, both small.

1. Add explicit colors to the <select>

className="flex-1 rounded-sm border-0 bg-transparent py-1 text-sm text-slate-900 dark:text-white focus:outline-hidden focus:ring-0"

This guarantees a readable selected-value color regardless of the parent's background.

2. Add explicit colors to each <option>

<option
  key={branch.name}
  value={branch.name}
  className="bg-white text-slate-900 dark:bg-slate-700 dark:text-white"
>
  {branch.name}
</option>

Native <option> styling is notoriously inconsistent across browsers (Chrome, Firefox, Safari each render the dropdown popup differently) but bg-* and text-* are honored everywhere we care about. This makes the popup readable in both themes.

Apply the same change to both the From dropdown (lines 115-125) and the Into dropdown (lines 137-147).

Done criteria

• In dark theme, the selected branch in both dropdowns is clearly visible.
• In dark theme, the dropdown popup options are clearly visible.
• In light theme, the dropdowns continue to render correctly (no regression).
• Tested in at least Chromium and Firefox — these two have the most divergent native <select> rendering.

Out of scope

Migrating these <select> elements to a Radix-based dropdown component (@radix-ui/react-select) for fully custom styling. That would solve the cross-browser styling problem permanently but is a larger refactor and isn't needed to unblock dark-theme usability.

Related

Worth a follow-up audit of all native <select> elements in the codebase to make sure the same bug isn't lurking elsewhere — many of them use bg-transparent without explicit text colors, which is the same shape of bug. Examples to check during the same PR:

• components/revision/BranchSelector.tsx
• app/settings/page.tsx (any <select> in the editor preferences section)
• Any other <select> reachable via grep -rn '<select' components/ app/