From 6622d8889df10d13a680b46b0cc18c380d4fad2d Mon Sep 17 00:00:00 2001
From: Serhii Dziupin <serkraser@gmail.com>
Date: Wed, 5 Aug 2026 13:35:10 +0300
Subject: [PATCH] fix(chat): keep sticky header gradient inside its padding

The gradient fade under the sticky user header was absolutely positioned at
top-full with h-4/sm:h-8, so it overlapped the first rows of the assistant
content below and obscured readable text (especially for headerless messages
with pt-0). Reserve the fade as bottom padding on the sticky container and
anchor the gradient to bottom-0, so it only covers the header's own padding
box and stays purely decorative with pointer-events-none.

Fixes #2524
---
 packages/ui/src/components/chat/components/TurnItem.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/chat/components/TurnItem.tsx b/packages/ui/src/components/chat/components/TurnItem.tsx
index d90d0f99..fcf7de6d 100644
--- a/packages/ui/src/components/chat/components/TurnItem.tsx
+++ b/packages/ui/src/components/chat/components/TurnItem.tsx
@@ -18,13 +18,13 @@ 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 relative bg-[var(--surface-background)] pb-4 sm:pb-8 [overflow-anchor:none]">
                     <div className="relative z-10">
                         {renderMessage(turn.userMessage)}
                     </div>
                     <div
                         aria-hidden="true"
-                        className="pointer-events-none absolute inset-x-0 top-full z-0 h-4 bg-gradient-to-b from-[var(--surface-background)] to-transparent sm:h-8"
+                        className="pointer-events-none absolute inset-x-0 bottom-0 z-0 h-4 bg-gradient-to-b from-[var(--surface-background)] to-transparent sm:h-8"
                     />
                 </div>
             ) : (