From 8c121920eff8e456245245c62b8ad5319c3715ef Mon Sep 17 00:00:00 2001
From: bashrusakh <bashrusakh@users.noreply.github.com>
Date: Sun, 12 Jul 2026 04:02:34 +1100
Subject: [PATCH] fix(chat): action buttons hidden under next turn sticky
 header (#2095)

The assistant block used 'relative z-0' which created a stacking context
at z-index 0. The next turn's sticky user header used 'sticky top-0 z-20'
creating a stacking context at z-index 20. Both were in the same parent
stacking context (ChatContainer's 'relative z-0'), so z-20 painted on top
of z-0, hiding the action buttons at the bottom of assistant messages.

Fix:
- Remove redundant 'relative' from the sticky header (sticky is already
  positioned, so 'relative' was redundant and confusing)
- Remove 'z-0' from TurnAssistantBlock so its children are not isolated
  at z-index 0
- Add 'relative z-30' to action button containers in MessageBody so they
  paint above the sticky header's z-20
---
 .../src/components/chat/components/TurnAssistantBlock.tsx   | 2 +-
 packages/ui/src/components/chat/components/TurnItem.tsx     | 2 +-
 packages/ui/src/components/chat/message/MessageBody.tsx     | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/chat/components/TurnAssistantBlock.tsx b/packages/ui/src/components/chat/components/TurnAssistantBlock.tsx
index 3027f1423f..29d41bb3d4 100644
--- a/packages/ui/src/components/chat/components/TurnAssistantBlock.tsx
+++ b/packages/ui/src/components/chat/components/TurnAssistantBlock.tsx
@@ -9,7 +9,7 @@ interface TurnAssistantBlockProps {
 
 const TurnAssistantBlock: React.FC<TurnAssistantBlockProps> = ({ assistantMessages, renderMessage }) => {
     return (
-        <div className="relative z-0">
+        <div className="relative">
             {assistantMessages.map((message) => renderMessage(message))}
         </div>
     );
diff --git a/packages/ui/src/components/chat/components/TurnItem.tsx b/packages/ui/src/components/chat/components/TurnItem.tsx
index d90d0f99c5..3415527930 100644
--- a/packages/ui/src/components/chat/components/TurnItem.tsx
+++ b/packages/ui/src/components/chat/components/TurnItem.tsx
@@ -18,7 +18,7 @@ const TurnItem: React.FC<TurnItemProps> = ({ turn, stickyUserHeader = true, rend
             data-scroll-spy-id={turn.turnId}
         >
             {stickyUserHeader ? (
-                <div className="sticky top-0 z-20 relative bg-[var(--surface-background)] [overflow-anchor:none]">
+                <div className="sticky top-0 z-20 bg-[var(--surface-background)] [overflow-anchor:none]">
                     <div className="relative z-10">
                         {renderMessage(turn.userMessage)}
                     </div>
diff --git a/packages/ui/src/components/chat/message/MessageBody.tsx b/packages/ui/src/components/chat/message/MessageBody.tsx
index 6ff0204379..9717c33340 100644
--- a/packages/ui/src/components/chat/message/MessageBody.tsx
+++ b/packages/ui/src/components/chat/message/MessageBody.tsx
@@ -1740,7 +1740,7 @@ const AssistantMessageBody = React.memo(({
                 );
                 if (shouldShowStandaloneMessageActions && i === lastRenderableTextPartIndex) {
                     rendered.push(
-                        <div key={`message-actions-${messageId}`} className={INLINE_MESSAGE_ACTIONS_CLASS_NAME} data-message-actions="true">
+                        <div key={`message-actions-${messageId}`} className={cn(INLINE_MESSAGE_ACTIONS_CLASS_NAME, 'relative z-30')} data-message-actions="true">
                             <div className="flex items-center gap-1.5" data-message-action-group="true">
                                 {messageActionButtons}
                             </div>
@@ -2061,7 +2061,7 @@ const AssistantMessageBody = React.memo(({
                 </div>
                 <MessageFilesDisplay files={parts} onShowPopup={onShowPopup} />
                 {shouldRenderStandaloneActionsAfterContent && (
-                    <div className={INLINE_MESSAGE_ACTIONS_CLASS_NAME} data-message-actions="true">
+                    <div className={cn(INLINE_MESSAGE_ACTIONS_CLASS_NAME, 'relative z-30')} data-message-actions="true">
                         <div className="flex items-center gap-1.5" data-message-action-group="true">
                             {messageActionButtons}
                         </div>
@@ -2069,7 +2069,7 @@ const AssistantMessageBody = React.memo(({
                 )}
                 {shouldShowTurnFooter && (
                     <div
-                        className="mt-2 mb-1 flex flex-wrap items-center justify-start gap-1.5"
+                        className="mt-2 mb-1 flex flex-wrap items-center justify-start gap-1.5 relative z-30"
                         style={MESSAGE_FOOTER_CONTAINER_STYLE}
                     >
                         <div className="flex items-center gap-1.5" data-message-action-group="true">