scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-10-10 03:28:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
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
This commit is contained in:
Roo Code 2026-04-30 13:38:30 +00:00
parent ad25634905
commit 221bc69421
1 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
webview-ui/src/components/chat/ApiConfigSelector.tsx
View file

@ -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"