From 264ea02ee115f4633d0f75ee835a723b9ae0fd67 Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Sun, 23 Aug 2026 18:27:35 +0300
Subject: [PATCH] fix(ui): constrain draft menus to chat area

---
 packages/ui/src/components/chat/ModelControls.tsx | 10 ++++++----
 .../chat/composer/ui/DraftTargetSelectors.tsx     |  4 ++--
 packages/ui/src/components/ui/dropdown-menu.tsx   | 15 +++++++++++++--
 packages/ui/src/components/ui/select.tsx          | 15 ++++++++++++---
 4 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/components/chat/ModelControls.tsx b/packages/ui/src/components/chat/ModelControls.tsx
index 80d547b2..a290fde8 100644
--- a/packages/ui/src/components/chat/ModelControls.tsx
+++ b/packages/ui/src/components/chat/ModelControls.tsx
@@ -2342,9 +2342,11 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                         </TooltipTrigger>
                         <DropdownMenuContent
                             side="top"
-                            className="w-[min(380px,calc(100vw-2rem))] max-h-[calc(100dvh-var(--oc-header-height,56px)-0.5rem)] p-0 flex flex-col"
+                            className="w-[min(380px,calc(100vw-2rem))] p-0 flex flex-col overflow-hidden"
                             align="end"
                             alignOffset={-40}
+                            constrainToMain
+                            collisionAvoidance={{ side: 'none', align: 'shift' }}
                             onKeyDownCapture={handleModelShortcutKeyDownCapture}
                         >
                             <div className="p-1 border-b border-border/40">
@@ -2401,7 +2403,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                                         </div>
                                     );
                                 }}
-                                maxHeightClassName="max-h-[min(400px,calc(100dvh-var(--oc-header-height,56px)-4rem))] flex-1"
+                                maxHeightClassName="max-h-[min(400px,calc(var(--available-height)-4rem))] flex-1"
                                 tooltipsEnabled={agentMenuOpen}
                                 onEscape={() => setAgentMenuOpen(false)}
                             />
@@ -2735,7 +2737,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                                     </div>
                                 </DropdownMenuTrigger>
                             </TooltipTrigger>
-                            <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">
+                            <DropdownMenuContent side="top" align="end" alignOffset={-40} constrainToMain collisionAvoidance={{ side: 'none', align: 'shift' }} className="w-[min(280px,calc(100vw-2rem))] p-0 flex flex-col overflow-hidden">
                                 <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" />
@@ -2751,7 +2753,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                                         />
                                     </div>
                                 </div>
-                                <ScrollableOverlay outerClassName="max-h-[min(400px,calc(100dvh-var(--oc-header-height,56px)-4rem))] flex-1">
+                                <ScrollableOverlay outerClassName="max-h-[min(400px,calc(var(--available-height)-4rem))] flex-1">
                                     <div className="p-1">
                                         {!agentSearchQuery.trim() && defaultAgentName && (
                                             <>
diff --git a/packages/ui/src/components/chat/composer/ui/DraftTargetSelectors.tsx b/packages/ui/src/components/chat/composer/ui/DraftTargetSelectors.tsx
index 8c44d434..c6fba04c 100644
--- a/packages/ui/src/components/chat/composer/ui/DraftTargetSelectors.tsx
+++ b/packages/ui/src/components/chat/composer/ui/DraftTargetSelectors.tsx
@@ -122,7 +122,7 @@ export function DraftTargetSelectors(props: DraftTargetProps) {
                             : <ProjectLabel project={selectedProject} theme={theme} />}
                     </SelectValue>
                 </SelectTrigger>
-                <SelectContent side="top" collisionAvoidance={{ side: 'none' }} fitContent>
+                <SelectContent side="top" collisionAvoidance={{ side: 'none' }} constrainToMain fitContent>
                     {projects.map((project) => (
                         <SelectItem key={project.id} value={project.id} className="max-w-[24rem] truncate">
                             <ProjectLabel project={project} theme={theme} />
@@ -144,7 +144,7 @@ export function DraftTargetSelectors(props: DraftTargetProps) {
                             {selectedBranchLabel ?? t('chat.chatInput.branch')}
                         </SelectValue>
                     </SelectTrigger>
-                    <SelectContent side="top" collisionAvoidance={{ side: 'none' }} className="w-max min-w-48">
+                    <SelectContent side="top" collisionAvoidance={{ side: 'none' }} constrainToMain className="w-max min-w-48">
                         {projectRootBranchOption ? (
                             <SelectGroup>
                                 <SelectLabel>{t('chat.chatInput.projectRoot')}</SelectLabel>
diff --git a/packages/ui/src/components/ui/dropdown-menu.tsx b/packages/ui/src/components/ui/dropdown-menu.tsx
index 495ff6bc..e8fd327f 100644
--- a/packages/ui/src/components/ui/dropdown-menu.tsx
+++ b/packages/ui/src/components/ui/dropdown-menu.tsx
@@ -13,7 +13,9 @@ type AsChildRenderProps = {
 
 type DropdownPortalContextValue = {
   portalContainer: HTMLElement | null;
+  collisionBoundary: Element | null;
   setPortalContainer: (container: HTMLElement | null) => void;
+  setCollisionBoundary: (boundary: Element | null) => void;
 };
 
 const DropdownPortalContext = React.createContext<DropdownPortalContextValue | null>(null);
@@ -36,10 +38,13 @@ function DropdownMenu({
   ...props
 }: React.ComponentProps<typeof BaseMenu.Root>) {
   const [portalContainer, setPortalContainer] = React.useState<HTMLElement | null>(null);
+  const [collisionBoundary, setCollisionBoundary] = React.useState<Element | null>(null);
   const portalContextValue = React.useMemo<DropdownPortalContextValue>(() => ({
     portalContainer,
+    collisionBoundary,
     setPortalContainer,
-  }), [portalContainer]);
+    setCollisionBoundary,
+  }), [collisionBoundary, portalContainer]);
 
   return (
     <DropdownPortalContext.Provider value={portalContextValue}>
@@ -62,6 +67,7 @@ function DropdownMenuTrigger({
     }
     const element = target instanceof HTMLElement ? target : null;
     portalContext.setPortalContainer(resolveDialogContainer(element));
+    portalContext.setCollisionBoundary(element?.closest('main') ?? null);
   }, [portalContext]);
 
   const r = renderFromAsChild(asChild, children);
@@ -89,6 +95,8 @@ type ContentProps = {
   alignOffset?: number;
   portalToBody?: boolean;
   positionerClassName?: string;
+  constrainToMain?: boolean;
+  collisionAvoidance?: React.ComponentProps<typeof BaseMenu.Positioner>["collisionAvoidance"];
   style?: React.CSSProperties;
   className?: string;
   children?: React.ReactNode;
@@ -103,6 +111,8 @@ function DropdownMenuContent({
   alignOffset,
   portalToBody = false,
   positionerClassName,
+  constrainToMain = false,
+  collisionAvoidance,
   style,
   children,
   onCloseAutoFocus,
@@ -118,6 +128,8 @@ function DropdownMenuContent({
         align={align}
         side={side}
         alignOffset={alignOffset}
+        collisionBoundary={constrainToMain ? portalContext?.collisionBoundary ?? undefined : undefined}
+        collisionAvoidance={collisionAvoidance}
         className={cn("app-region-no-drag z-50", positionerClassName)}
       >
         <BaseMenu.Popup
@@ -128,7 +140,6 @@ function DropdownMenuContent({
           }}
           className={cn(
             dropdownMenuPopupClass,
-            "max-h-[calc(100dvh-var(--oc-header-height,56px)-0.5rem)] overflow-y-auto",
             className
           )}
           {...props}
diff --git a/packages/ui/src/components/ui/select.tsx b/packages/ui/src/components/ui/select.tsx
index 99673fda..0fb0ea0e 100644
--- a/packages/ui/src/components/ui/select.tsx
+++ b/packages/ui/src/components/ui/select.tsx
@@ -17,7 +17,9 @@ type AsChildRenderProps = {
 
 type SelectPortalContextValue = {
   portalContainer: HTMLElement | null;
+  collisionBoundary: Element | null;
   setPortalContainer: (container: HTMLElement | null) => void;
+  setCollisionBoundary: (boundary: Element | null) => void;
 };
 
 const SelectPortalContext = React.createContext<SelectPortalContextValue | null>(null);
@@ -44,10 +46,13 @@ function Select<Value extends string = string>({
   ...props
 }: SelectRootProps<Value>) {
   const [portalContainer, setPortalContainer] = React.useState<HTMLElement | null>(null);
+  const [collisionBoundary, setCollisionBoundary] = React.useState<Element | null>(null);
   const portalContextValue = React.useMemo<SelectPortalContextValue>(() => ({
     portalContainer,
+    collisionBoundary,
     setPortalContainer,
-  }), [portalContainer]);
+    setCollisionBoundary,
+  }), [collisionBoundary, portalContainer]);
 
   const handleValueChange = React.useCallback(
     (value: unknown, eventDetails: SelectRootChangeEventDetails) => {
@@ -119,6 +124,7 @@ function SelectTrigger({
     }
     const element = target instanceof HTMLElement ? target : null;
     portalContext.setPortalContainer(resolveDialogContainer(element));
+    portalContext.setCollisionBoundary(element?.closest('main') ?? null);
   }, [portalContext]);
 
   const asChildRender: AsChildRenderProps | null = asChild && React.isValidElement(children)
@@ -164,6 +170,7 @@ type SelectContentExtra = {
   side?: "top" | "right" | "bottom" | "left";
   align?: "start" | "center" | "end";
   collisionAvoidance?: React.ComponentProps<typeof BaseSelect.Positioner>["collisionAvoidance"];
+  constrainToMain?: boolean;
 };
 
 function SelectContent({
@@ -176,6 +183,7 @@ function SelectContent({
   side,
   align,
   collisionAvoidance,
+  constrainToMain = false,
   ...props
 }: React.ComponentProps<typeof BaseSelect.Popup> & SelectContentExtra) {
   const portalContext = React.useContext(SelectPortalContext);
@@ -190,6 +198,7 @@ function SelectContent({
         side={side}
         align={align}
         collisionAvoidance={collisionAvoidance}
+        collisionBoundary={constrainToMain ? portalContext?.collisionBoundary ?? undefined : undefined}
         className="absolute z-[120] pointer-events-auto"
       >
         <BaseSelect.Popup
@@ -198,7 +207,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-[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",
+            "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",
             !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 +217,7 @@ function SelectContent({
         >
           <ScrollableOverlay
             outerClassName={cn(
-              "max-h-[min(var(--available-height),calc(100dvh-var(--oc-header-height,56px)-0.5rem))]",
+              "max-h-[var(--available-height)]",
               fitContent ? "w-max" : "w-full"
             )}
             className={cn(