From 9c90b12cdcbdfb9525d4b5b3e73cbdd2456a115c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Titsworth-Morin?= <raphael@raphaeltm.com>
Date: Mon, 23 Feb 2026 16:40:27 +0000
Subject: [PATCH] fix(acp-client): fix scroll-to-bottom FAB visibility (z-index
 + offset)

The FAB was rendering behind the scroll container because
overflow-y:auto creates a new stacking context. Added z-10 to ensure
the button paints above the scrollable area. Also bumped right offset
from right-3 to right-5 to clear the scrollbar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/acp-client/src/components/AgentPanel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/acp-client/src/components/AgentPanel.tsx b/packages/acp-client/src/components/AgentPanel.tsx
index 6a0a92c..17c967f 100644
--- a/packages/acp-client/src/components/AgentPanel.tsx
+++ b/packages/acp-client/src/components/AgentPanel.tsx
@@ -292,12 +292,12 @@ export const AgentPanel = React.forwardRef<AgentPanelHandle, AgentPanelProps>(fu
             <ConversationItemView key={item.id} item={item} />
           ))}
         </div>
-        {/* Scroll-to-bottom FAB */}
+        {/* Scroll-to-bottom FAB — z-10 required because overflow-y-auto creates a stacking context */}
         {!isAtBottom && messages.items.length > 0 && (
           <button
             type="button"
             onClick={scrollToBottom}
-            className="absolute bottom-3 right-3 w-8 h-8 flex items-center justify-center rounded-full bg-white border border-gray-300 shadow-md text-gray-500 hover:bg-gray-50 hover:text-gray-700 transition-colors"
+            className="absolute bottom-3 right-5 z-10 w-8 h-8 flex items-center justify-center rounded-full bg-white border border-gray-300 shadow-md text-gray-500 hover:bg-gray-50 hover:text-gray-700 transition-colors"
             aria-label="Scroll to bottom"
             title="Scroll to bottom"
           >