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

studio/frontend: grow chat composer to 16 rows and inset scrollbar (#5540)

Browse source 
* studio/frontend: grow chat composer to 16 rows and inset scrollbar

Raise the composer textarea cap from 6 to 16 rows so the input keeps
expanding as you type longer prompts. Also nudge the textarea in with
mt-2 / mr-3 so the internal scrollbar no longer sits flush against
the rounded edges of the chat composer surface.

* studio/frontend: lower composer cap from 16 to 12 rows

Keeps the composer growing past the previous 6-row cap while staying
conservative enough that a fully expanded textarea does not cover the
scroll-to-bottom button or a large slice of recent messages.

* studio/frontend: use symmetric mx-3 inset on composer-input

Replaces mr-3 with mx-3 (and width calc(100%-1.5rem)) so the textarea
sits inset from both edges of the chat composer surface. Keeps the
scrollbar tucked in regardless of writing direction: LTR scrolls on
the right, RTL scrolls on the left, and both edges are now ~16px in
from the surface (4px surface px-1 + 12px mx-3).
This commit is contained in:
Michael Han 2026-05-18 03:47:01 -07:00 • committed by GitHub
commit b78fe45256
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 2 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -312,7 +312,7 @@ const Composer: FC<{ disabled?: boolean }> = ({ disabled }) => {
placeholder="Send a message..."
className="aui-composer-input composer-input"
minRows={1}
maxRows={6}
maxRows={12}
autoFocus={!disabled}
disabled={disabled}
aria-label="Message input"

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

@ -806,7 +806,7 @@
}
.composer-input {
@apply mb-1 min-h-12 w-full resize-none overflow-y-auto bg-transparent pl-5 pr-4 pt-2 pb-3 text-sm font-[450] outline-none placeholder:text-muted-foreground focus-visible:ring-0;
@apply mt-2 mb-1 mx-3 min-h-12 w-[calc(100%-1.5rem)] resize-none overflow-y-auto bg-transparent pl-5 pr-4 pt-2 pb-3 text-sm font-[450] outline-none placeholder:text-muted-foreground focus-visible:ring-0;
}
.composer-action-wrapper {