ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix chat text cutoff at composer dock and speed up plus icon spin (#5989)

Browse source 
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.
This commit is contained in:
Michael Han 2026-06-05 01:54:30 -07:00 • committed by GitHub
commit 2b51bec946
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 4 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

3
studio/frontend/src/components/assistant-ui/thread.tsx
View file

@ -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)">

4
studio/frontend/src/index.css
View file

@ -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;
}
}