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.
This commit is contained in:
shimmyshimmer 2026-06-03 20:38:47 -07:00
commit fbc5b81b54
2 changed files with 4 additions and 2 deletions

View file

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

View file

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