From 2b51bec946d56962cadf6e6ef6bb129f30ce48d9 Mon Sep 17 00:00:00 2001
From: Michael Han <107991372+shimmyshimmer@users.noreply.github.com>
Date: Fri, 5 Jun 2026 01:54:30 -0700
Subject: [PATCH] Fix chat text cutoff at composer dock and speed up plus icon
 spin (#5989)

The composer dock backdrop was a solid block with a hard top edge, so
chat text scrolling underneath got visibly clipped. Replace it with a
gradient that fades the top 28px to transparent.

Also shorten the plus to x rotation in the composer from 300ms to 250ms,
including the reduced motion override.
---
 studio/frontend/src/components/assistant-ui/thread.tsx | 3 ++-
 studio/frontend/src/index.css                          | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx
index 83057074ba..a55c89f634 100644
--- a/studio/frontend/src/components/assistant-ui/thread.tsx
+++ b/studio/frontend/src/components/assistant-ui/thread.tsx
@@ -380,9 +380,10 @@ const ThreadComposerDock: FC<{
         overlay ? "z-40" : "z-20",
       )}
     >
+      {/* Fade the top edge so scrolling text is not cut off by a hard line. */}
       <div
         aria-hidden={true}
-        className="absolute inset-x-0 bottom-0 top-[10px] bg-background"
+        className="absolute inset-x-0 bottom-0 top-[10px] bg-gradient-to-t from-background from-[calc(100%_-_28px)] to-transparent"
       />
       <div className="relative px-5 pb-2">
         <div className="pointer-events-auto mx-auto w-full max-w-(--thread-max-width)">
diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css
index 70dee1dcd7..b6c5ac04e7 100644
--- a/studio/frontend/src/index.css
+++ b/studio/frontend/src/index.css
@@ -1140,7 +1140,7 @@
 	/* Open menu rotates the plus 45deg into an x. Ease-in-out for a smooth
 	   spin; keep it at 45deg so it never passes back through a "+". */
 	.unsloth-composer-plus svg {
-		transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
+		transition: transform 250ms cubic-bezier(0.65, 0, 0.35, 1);
 		will-change: transform;
 	}
 
@@ -2009,6 +2009,6 @@
 	/* Keep the plus/x morph animating under reduced motion (small rotation,
 	   like the spinners above). */
 	.unsloth-composer-plus svg {
-		transition-duration: 300ms !important;
+		transition-duration: 250ms !important;
 	}
 }