From b78fe45256e4b2e52e2ba16d5bf5d94f1d4918aa Mon Sep 17 00:00:00 2001
From: Michael Han <107991372+shimmyshimmer@users.noreply.github.com>
Date: Mon, 18 May 2026 03:47:01 -0700
Subject: [PATCH] studio/frontend: grow chat composer to 16 rows and inset
 scrollbar (#5540)

* 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).
---
 studio/frontend/src/components/assistant-ui/thread.tsx | 2 +-
 studio/frontend/src/index.css                          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx
index 2c04538818..e42696d06d 100644
--- a/studio/frontend/src/components/assistant-ui/thread.tsx
+++ b/studio/frontend/src/components/assistant-ui/thread.tsx
@@ -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"
diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css
index dd01b797ce..43f244d9ba 100644
--- a/studio/frontend/src/index.css
+++ b/studio/frontend/src/index.css
@@ -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 {