From 221bc6942194d62a30d6b6cb17b5d5466971ef39 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Thu, 30 Apr 2026 13:38:30 +0000
Subject: [PATCH] fix: prevent bottom bar clipping in API config popover
 (#12237)

The PopoverContent used overflow-hidden without a max-height constraint,
which allowed Radix UI viewport collision avoidance to clip the bottom
bar (containing the lock and settings buttons) when the popover was
positioned near the bottom of the screen.

Changes:
- Add max-h based on --radix-popover-content-available-height CSS variable
  to PopoverContent so the flex layout can properly distribute space
- Add max-h-inherit to the inner flex container so it respects the constraint
- Add flex-shrink-0 to header, bottom bar to prevent them from shrinking
- Change config list to use min-h-0 flex-1 so it shrinks instead of the
  bottom bar when viewport space is limited
---
 webview-ui/src/components/chat/ApiConfigSelector.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/webview-ui/src/components/chat/ApiConfigSelector.tsx b/webview-ui/src/components/chat/ApiConfigSelector.tsx
index e370296ec32..1898321fd4a 100644
--- a/webview-ui/src/components/chat/ApiConfigSelector.tsx
+++ b/webview-ui/src/components/chat/ApiConfigSelector.tsx
@@ -167,11 +167,11 @@ export const ApiConfigSelector = ({
 				align="start"
 				sideOffset={4}
 				container={portalContainer}
-				className="p-0 overflow-hidden w-[300px]">
-				<div className="flex flex-col w-full">
+				className="p-0 overflow-hidden w-[300px] max-h-[var(--radix-popover-content-available-height,80vh)]">
+				<div className="flex flex-col w-full max-h-[inherit]">
 					{/* Search input or info blurb */}
 					{listApiConfigMeta.length > 6 ? (
-						<div className="relative p-2 border-b border-vscode-dropdown-border">
+						<div className="relative p-2 border-b border-vscode-dropdown-border flex-shrink-0">
 							<input
 								aria-label={t("common:ui.search_placeholder")}
 								value={searchValue}
@@ -190,7 +190,7 @@ export const ApiConfigSelector = ({
 							)}
 						</div>
 					) : (
-						<div className="p-3 border-b border-vscode-dropdown-border">
+						<div className="p-3 border-b border-vscode-dropdown-border flex-shrink-0">
 							<p className="text-xs text-vscode-descriptionForeground m-0">
 								{t("prompts:apiConfiguration.select")}
 							</p>
@@ -201,7 +201,7 @@ export const ApiConfigSelector = ({
 					{filteredConfigs.length === 0 && searchValue ? (
 						<div className="py-2 px-3 text-sm text-vscode-foreground/70">{t("common:ui.no_results")}</div>
 					) : (
-						<div className="max-h-[300px] overflow-y-auto">
+						<div className="min-h-0 flex-1 overflow-y-auto max-h-[300px]">
 							{/* Pinned configs - sticky header */}
 							{pinnedConfigs.length > 0 && (
 								<div
@@ -224,7 +224,7 @@ export const ApiConfigSelector = ({
 					)}
 
 					{/* Bottom bar with buttons on left and title on right */}
-					<div className="flex flex-row items-center justify-between px-2 py-2 border-t border-vscode-dropdown-border">
+					<div className="flex flex-row items-center justify-between px-2 py-2 border-t border-vscode-dropdown-border flex-shrink-0">
 						<div className="flex flex-row gap-1">
 							<IconButton
 								iconClass="codicon-settings-gear"