From 3acf1dac841927083cc72a91ed5b1b6e84c9c587 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 13 Jan 2026 19:40:17 +0000
Subject: [PATCH] Make chat composer scrollable with height constraints

- Changed wrapper from fixed h-7 to min-h-7 with max-h-32 (up to 128px)
- Added overflow-y-auto to allow vertical scrolling when content exceeds height
- Changed items-center to items-start for proper content flow from top
- Added width: 100% to ProseMirror to ensure full-width rendering
- Added word-wrap and overflow-wrap to ProseMirror paragraphs for proper text wrapping

Now users can type multi-line messages (Shift+Enter) and the composer will
scroll vertically while maintaining a reasonable maximum height.
---
 src/components/editor/MentionEditor.tsx | 7 ++-----
 src/index.css                           | 3 +++
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/editor/MentionEditor.tsx b/src/components/editor/MentionEditor.tsx
index bf09a10..85f1c36 100644
--- a/src/components/editor/MentionEditor.tsx
+++ b/src/components/editor/MentionEditor.tsx
@@ -875,12 +875,9 @@ export const MentionEditor = forwardRef<
 
     return (
       <div
-        className={`rounded border bg-background transition-colors focus-within:border-primary h-7 flex items-center overflow-hidden ${className}`}
+        className={`rounded border bg-background transition-colors focus-within:border-primary min-h-7 max-h-32 flex items-start overflow-y-auto overflow-x-hidden ${className}`}
       >
-        <EditorContent
-          editor={editor}
-          className="flex-1 min-w-0 overflow-x-auto"
-        />
+        <EditorContent editor={editor} className="flex-1 min-w-0" />
       </div>
     );
   },
diff --git a/src/index.css b/src/index.css
index 023cd8e..fd0068b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -283,6 +283,7 @@ body.animating-layout
 .ProseMirror {
   min-height: 1.25rem;
   line-height: 1.25rem;
+  width: 100%;
 }
 
 .ProseMirror:focus {
@@ -292,6 +293,8 @@ body.animating-layout
 .ProseMirror p {
   margin: 0;
   line-height: 1.25rem;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .ProseMirror p.is-editor-empty:first-child::before {