fix(gui): prevent custom select dropdown from overflowing viewport when placed on right

[Yuxin-Qiao]

Summary

• Fixes custom <Select /> dropdown popovers overflowing past the right edge of the card container and viewport when rendered in right-aligned control sections (such as Subagent Delegation model settings).
• Auto-detects right-alignment in computeSelectMenuStyle when the trigger button sits in the right half of the viewport (trigger.right > vw / 2) and no explicit align prop is passed.
• Explicitly adds align="right" to right-aligned Select controls in SubagentDelegationSection and dashboard-overview-sections.

Verification

• Ran cd gui && bun test tests/select-position.test.ts (added unit test for auto right-alignment)
• Ran cd gui && bun test tests (all 611 GUI tests passing)
• Ran bun run typecheck (strict TypeScript check passing)
• Ran bun run lint:gui (ESLint passing)

Checklist

• Scope stays focused and avoids unrelated cleanup.
• Docs or release notes were updated when needed.
• Security-sensitive changes were reviewed for secrets, auth, and unsafe defaults.

Review readiness checklist

This PR stays in draft until every box below is ticked. Tick all four boxes once the requirements are met:

• All CI tests are green on my local testing.

• I pushed my PR to the latest dev commit.

• I resolved all correct Codex and CodeRabbit findings.

• My PR is ready for review.

Summary by CodeRabbit

• Bug Fixes
  • Improved dropdown positioning for controls near the right side of the screen.
  • Dropdowns now automatically align based on their trigger location and maintain proper viewport spacing.
  • Updated model, effort, delegation, and sidecar menus to open with right alignment where appropriate.

[github-actions]

✅ Deterministic PR hygiene checks passed.

[github-actions]

⏳ DRAFT

• review readiness checklist open (0/4 boxes ticked).

What to do

• Tick all four boxes in the PR description once you're done (currently 0/4).

Review readiness checklist

• ⬜ All CI tests are green on my local testing.
• ⬜ I pushed my PR to the latest dev commit.
• ⬜ I resolved all correct Codex and CodeRabbit findings.
• ⬜ My PR is ready for review.

0/4 boxes ticked.

This PR stays in draft until every box above is ticked.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 28673a82-4e18-48d0-a36d-c2cf925f15a2

📥 Commits

Reviewing files that changed from the base of the PR and between 57ae094 and 356daf8.

📒 Files selected for processing (4)

• gui/src/components/subagents-workspace/SubagentDelegationSection.tsx
• gui/src/pages/dashboard-overview-sections.tsx
• gui/src/select-position.ts
• gui/tests/select-position.test.ts

---

📝 Walkthrough

Walkthrough

Select menus now derive alignment from trigger position when no alignment is provided. Dashboard selectors explicitly request right alignment. Right-aligned menus enforce viewport padding above and below their triggers.

Changes

Select alignment

Layer / File(s)	Summary
Automatic alignment and viewport clamping gui/src/select-position.ts, gui/tests/select-position.test.ts	computeSelectMenuStyle selects right alignment for triggers in the right half of the viewport when align is omitted. Above- and below-positioned menus clamp right alignment to viewport padding. Tests cover the automatic right-alignment case.
Right-aligned dashboard selectors gui/src/components/subagents-workspace/SubagentDelegationSection.tsx, gui/src/pages/dashboard-overview-sections.tsx	Subagent, effort-cap, delegation, and sidecar model selectors pass align="right" to Select.

Estimated code review effort: 2 (Simple) | ~10 minutes

Mergeability Score: ⚪ Minimal · up to 356da

This localized change keeps right-aligned select menus within the visible viewport, with no actionable merge-blocking risk remaining after normal checks and review.

Possibly related PRs

• lidge-jun/opencodex#393: Introduced computeSelectMenuStyle and its portal-based positioning tests.
• lidge-jun/opencodex#824: Adjusted right-placement spacing in the same positioning module and tests.

Suggested reviewers: wibias, lidge-jun

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: preventing custom select dropdowns from overflowing on the right side of the viewport.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✨ 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.}