fix: prevent bottom bar clipping in API config popover (#12237)

[roomote-v0]

Related GitHub Issue

Closes: #12237

Description

This PR attempts to address Issue #12237. Feedback and guidance are welcome.

Root cause analysis: The user reported the lock button in the API Configuration popover was not showing up. After investigating all possible conditions that could prevent the button from appearing (detailed in this comment), the most likely cause is that the PopoverContent uses overflow-hidden without a proper max-height constraint. When Radix UI's popover applies viewport collision avoidance (constraining the popover height near screen edges), overflow-hidden clips the bottom bar containing the lock and settings buttons.

What this PR changes:

• Adds max-h-[var(--radix-popover-content-available-height,80vh)] to PopoverContent so the flex layout can properly distribute space within the viewport-constrained height
• Adds max-h-[inherit] to the inner flex container to respect the constraint
• Adds flex-shrink-0 to the header and bottom bar so they never get compressed
• Changes the config list to min-h-0 flex-1 so it shrinks (and scrolls) instead of the bottom bar when viewport space is limited

Other possible causes identified (not addressed in this PR):

• The popover trigger is disabled during active tasks (selectApiConfigDisabled is true when sendingDisabled && clineAsk !== "api_req_failed"), which prevents the popover from opening at all. This is intentional behavior but could be confusing.

Test Procedure

• Existing tests: All 26 tests in ApiConfigSelector.spec.tsx and ChatTextArea.lockApiConfig.spec.tsx pass
• Manual testing: Open the API Configuration popover with the VS Code panel near the bottom of the screen. The bottom bar (settings gear + lock icon) should remain visible regardless of viewport position
• Verify: With many API configs, the config list scrolls while the bottom bar stays fixed

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue
• Scope: Changes are focused on the linked issue (one fix)
• Self-Review: I have performed a thorough self-review of my code
• Testing: Existing tests pass; layout change is CSS-only and does not affect component behavior
• Documentation Impact: No documentation updates required
• Contribution Guidelines: I have read and agree to the Contributor Guidelines

Documentation Updates

No documentation changes needed -- this is a CSS layout fix.

Interactively review PR in Roo Code Cloud