BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): keep draft dropdowns below header

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2026-08-23 17:24:59 +03:00
parent 421a868a1a
commit 2ca3280b39
3 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/ModelControls.tsx
+4 -3
View File
@@ -2342,7 +2342,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
</TooltipTrigger>
<DropdownMenuContent
side="top"
className="w-[min(380px,calc(100vw-2rem))] p-0 flex flex-col"
className="w-[min(380px,calc(100vw-2rem))] max-h-[calc(100dvh-var(--oc-header-height,56px)-0.5rem)] p-0 flex flex-col"
align="end"
alignOffset={-40}
onKeyDownCapture={handleModelShortcutKeyDownCapture}
@@ -2401,6 +2401,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
</div>
);
}}
maxHeightClassName="max-h-[min(400px,calc(100dvh-var(--oc-header-height,56px)-4rem))] flex-1"
tooltipsEnabled={agentMenuOpen}
onEscape={() => setAgentMenuOpen(false)}
/>
@@ -2734,7 +2735,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
</div>
</DropdownMenuTrigger>
</TooltipTrigger>
<DropdownMenuContent side="top" align="end" alignOffset={-40} className="w-[min(280px,calc(100vw-2rem))] p-0 flex flex-col">
<DropdownMenuContent side="top" align="end" alignOffset={-40} className="w-[min(280px,calc(100vw-2rem))] max-h-[calc(100dvh-var(--oc-header-height,56px)-0.5rem)] p-0 flex flex-col">
<div className="p-2 border-b border-border/40">
<div className="relative">
<Icon name="search" className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
@@ -2750,7 +2751,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
/>
</div>
</div>
<ScrollableOverlay outerClassName="max-h-[min(400px,calc(100dvh-12rem))] flex-1">
<ScrollableOverlay outerClassName="max-h-[min(400px,calc(100dvh-var(--oc-header-height,56px)-4rem))] flex-1">
<div className="p-1">
{!agentSearchQuery.trim() && defaultAgentName && (
<>
packages/ui/src/components/ui/dropdown-menu.tsx
+1
View File
@@ -128,6 +128,7 @@ function DropdownMenuContent({
}}
className={cn(
dropdownMenuPopupClass,
"max-h-[calc(100dvh-var(--oc-header-height,56px)-0.5rem)] overflow-y-auto",
className
)}
{...props}
packages/ui/src/components/ui/select.tsx
+2 -2
View File
@@ -198,7 +198,7 @@ function SelectContent({
color: 'var(--surface-elevated-foreground)',
}}
className={cn(
"oc-glass-popover oc-glass-floating pointer-events-auto transition-all duration-150 ease-out data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 relative z-[120] max-h-[var(--available-height)] min-w-[8rem] origin-[var(--transform-origin)] overflow-x-hidden rounded-xl",
"oc-glass-popover oc-glass-floating pointer-events-auto transition-all duration-150 ease-out data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 relative z-[120] max-h-[min(var(--available-height),calc(100dvh-var(--oc-header-height,56px)-0.5rem))] min-w-[8rem] origin-[var(--transform-origin)] overflow-x-hidden rounded-xl",
!alignItemWithTrigger &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
fitContent && "w-max min-w-0",
@@ -208,7 +208,7 @@ function SelectContent({
>
<ScrollableOverlay
outerClassName={cn(
"max-h-[var(--available-height)]",
"max-h-[min(var(--available-height),calc(100dvh-var(--oc-header-height,56px)-0.5rem))]",
fitContent ? "w-max" : "w-full"
)}
className={cn(