From 5acca9fce868d11cae1101a23b42545b2d5324fb Mon Sep 17 00:00:00 2001
From: Brennan Benson <79079362+brennanb2025@users.noreply.github.com>
Date: Mon, 10 Aug 2026 22:56:46 -0700
Subject: [PATCH] fix(native-chat): open composer pickers upward

---
 .../NativeChatSessionOptionPickers.test.tsx   | 35 ++++++++++++++++++-
 .../NativeChatSessionOptionPickers.tsx        |  4 +--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/components/native-chat/NativeChatSessionOptionPickers.test.tsx b/src/renderer/src/components/native-chat/NativeChatSessionOptionPickers.test.tsx
index e7d3eda0985..cc9963b94b2 100644
--- a/src/renderer/src/components/native-chat/NativeChatSessionOptionPickers.test.tsx
+++ b/src/renderer/src/components/native-chat/NativeChatSessionOptionPickers.test.tsx
@@ -40,7 +40,23 @@ vi.mock('@/components/ui/dropdown-menu', () => {
       children: React.ReactNode
       disabled?: boolean
     }) => <div data-disabled={disabled || undefined}>{children}</div>,
-    DropdownMenuContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    DropdownMenuContent: ({
+      children,
+      side,
+      collisionPadding
+    }: {
+      children: React.ReactNode
+      side?: string
+      collisionPadding?: number
+    }) => (
+      <div
+        data-testid="session-option-menu"
+        data-side={side}
+        data-collision-padding={collisionPadding}
+      >
+        {children}
+      </div>
+    ),
     DropdownMenuLabel: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
     DropdownMenuSeparator: () => <hr />,
     DropdownMenuItem: ({
@@ -172,6 +188,23 @@ const fast: SessionOptionDescriptor = {
 afterEach(() => cleanup())
 
 describe('NativeChatSessionOptionPickers', () => {
+  it('prefers collision-aware upward placement for model and option menus', () => {
+    render(
+      <NativeChatSessionOptionPickers
+        surface={surface}
+        snapshot={[model(), effort]}
+        isWorking={false}
+      />
+    )
+
+    const menus = screen.getAllByTestId('session-option-menu')
+    expect(menus).toHaveLength(2)
+    for (const menu of menus) {
+      expect(menu.getAttribute('data-side')).toBe('top')
+      expect(menu.getAttribute('data-collision-padding')).toBe('8')
+    }
+  })
+
   it('renders model and joined option labels, and hides an empty options pill', () => {
     const { rerender } = render(
       <NativeChatSessionOptionPickers
diff --git a/src/renderer/src/components/native-chat/NativeChatSessionOptionPickers.tsx b/src/renderer/src/components/native-chat/NativeChatSessionOptionPickers.tsx
index 2b83d68ea95..7a298d5ace3 100644
--- a/src/renderer/src/components/native-chat/NativeChatSessionOptionPickers.tsx
+++ b/src/renderer/src/components/native-chat/NativeChatSessionOptionPickers.tsx
@@ -242,7 +242,7 @@ function NativeChatSessionOptionPickersInner({
             disabledReason={optionsReason}
             dispatched={options.some((descriptor) => descriptor.valueSource === 'dispatched')}
           />
-          <DropdownMenuContent align="start" className="w-60">
+          <DropdownMenuContent align="start" side="top" collisionPadding={8} className="w-60">
             {options.map((descriptor, index) => {
               const reason = nativeChatSessionOptionDisabledReason(descriptor.disabledReason)
               return (
@@ -272,7 +272,7 @@ function NativeChatSessionOptionPickersInner({
           disabledReason={modelReason}
           dispatched={model.valueSource === 'dispatched'}
         />
-        <DropdownMenuContent align="start" className="w-64">
+        <DropdownMenuContent align="start" side="top" collisionPadding={8} className="w-64">
           {modelReason && !model.settable ? (
             <DropdownMenuLabel className="font-normal">{modelReason}</DropdownMenuLabel>
           ) : null}