From ed5e8c147b0b0b0789295f8bf80b4f9ea26b4e47 Mon Sep 17 00:00:00 2001
From: Ramiro <ramarivera@gmail.com>
Date: Sat, 30 May 2026 06:19:02 +0200
Subject: [PATCH] fix(web): keep pet composer menu expanded (#3336)

- apps/web/src/components/ChatComposer.tsx
- apps/web/tests/components/ChatComposer.context-pickers.test.tsx

Clear stale absolute anchors when the pet composer menu is positioned fixed so the popover wraps its content instead of collapsing over the composer textarea.
---
 apps/web/src/components/ChatComposer.tsx      |  8 ++++-
 .../ChatComposer.context-pickers.test.tsx     | 30 +++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/ChatComposer.tsx b/apps/web/src/components/ChatComposer.tsx
index 1fd95d03f..876e17378 100644
--- a/apps/web/src/components/ChatComposer.tsx
+++ b/apps/web/src/components/ChatComposer.tsx
@@ -373,7 +373,13 @@ export const ChatComposer = forwardRef<ChatComposerHandle, Props>(
       // Right-align by default (menu right edge ≈ button right edge).
       // Shift left when the menu would spill past the viewport left edge.
       const left = Math.max(8, Math.min(viewW - menuW - 8, rect.right - menuW));
-      setPetMenuStyle({ position: 'fixed', top, left });
+      setPetMenuStyle({
+        position: 'fixed',
+        top,
+        left,
+        bottom: 'auto',
+        right: 'auto',
+      });
     }, [petMenuOpen]);
 
     // Lazy-fetch the user's external MCP servers list once on mount so the
diff --git a/apps/web/tests/components/ChatComposer.context-pickers.test.tsx b/apps/web/tests/components/ChatComposer.context-pickers.test.tsx
index 192e23557..b6b186a12 100644
--- a/apps/web/tests/components/ChatComposer.context-pickers.test.tsx
+++ b/apps/web/tests/components/ChatComposer.context-pickers.test.tsx
@@ -344,4 +344,34 @@ describe('ChatComposer context pickers', () => {
     });
     expect(screen.getByText('Private export workflow')).toBeTruthy();
   });
+
+  it('clears absolute anchors when the pet popover switches to fixed positioning', async () => {
+    renderComposer({
+      petConfig: {
+        adopted: false,
+        enabled: false,
+        petId: 'custom',
+        custom: {
+          name: 'Buddy',
+          glyph: '🐾',
+          accent: '#7c3aed',
+          greeting: 'hi',
+        },
+      },
+      onAdoptPet: vi.fn(),
+      onTogglePet: vi.fn(),
+      onOpenPetSettings: vi.fn(),
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Pets — wake, tuck, or pick one' }));
+
+    const menu = screen.getByText('Show pet').closest('.composer-pet-menu') as HTMLElement | null;
+    expect(menu).not.toBeNull();
+
+    await waitFor(() => {
+      expect(menu?.style.position).toBe('fixed');
+      expect(menu?.style.bottom).toBe('auto');
+      expect(menu?.style.right).toBe('auto');
+    });
+  });
 });