From fbc5b81b544467f884dabf99faa316fe00a119f5 Mon Sep 17 00:00:00 2001
From: shimmyshimmer <107991372+shimmyshimmer@users.noreply.github.com>
Date: Wed, 3 Jun 2026 20:38:47 -0700
Subject: [PATCH] style(chat): fade composer dock edge and tune plus morph
 timing

The composer dock backdrop was a solid block with a hard top edge, so
chat text scrolling underneath got cut off abruptly. Replace it with a
gradient that stays solid behind the composer and fades to transparent
over the top 28px.

Also set the plus to x morph to 250ms; 200ms felt too abrupt and 300ms
too slow.
---
 studio/frontend/src/components/assistant-ui/thread.tsx | 3 ++-
 studio/frontend/src/index.css                          | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx
index 34f5ff42fe..4c1665e924 100644
--- a/studio/frontend/src/components/assistant-ui/thread.tsx
+++ b/studio/frontend/src/components/assistant-ui/thread.tsx
@@ -342,9 +342,10 @@ const ThreadComposerDock: FC<{
         overlay ? "z-40" : "z-20",
       )}
     >
+      {/* Fade the top edge so scrolled text dissolves instead of clipping. */}
       <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 5e24c202e4..5423e5a699 100644
--- a/studio/frontend/src/index.css
+++ b/studio/frontend/src/index.css
@@ -1082,7 +1082,8 @@
   }
 
   .unsloth-composer-plus svg {
-    transition: transform var(--duration-normal) ease-in-out;
+    /* 250ms reads better than --duration-normal for the plus/x morph. */
+    transition: transform 250ms ease-in-out;
     transform-origin: center;
   }