From 284837d7aa0a278257a0da0f94223a332bafcb0d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 13 Jan 2026 20:39:46 +0000
Subject: [PATCH] Fix chat composer placeholder and text alignment

- Adjusted .ProseMirror min-height from 2rem to 1.25rem to match container
- Added flexbox layout to .ProseMirror for proper vertical centering
- Removed float:left and height:0 from placeholder causing misalignment
- Moved padding from editor props to wrapper div
- Updated EditorContent to use flex items-center for alignment

Resolves vertical alignment issues in chat composer input field.
---
 src/components/editor/MentionEditor.tsx | 7 +++----
 src/index.css                           | 8 +++++---
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/editor/MentionEditor.tsx b/src/components/editor/MentionEditor.tsx
index 7fadd8a..60b81b9 100644
--- a/src/components/editor/MentionEditor.tsx
+++ b/src/components/editor/MentionEditor.tsx
@@ -820,8 +820,7 @@ export const MentionEditor = forwardRef<
       extensions,
       editorProps: {
         attributes: {
-          class:
-            "prose prose-sm max-w-none focus:outline-none min-h-[1.25rem] px-2 py-1 whitespace-nowrap text-sm",
+          class: "prose prose-sm max-w-none focus:outline-none text-sm",
         },
       },
       autofocus: autoFocus,
@@ -887,11 +886,11 @@ 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 h-7 flex items-center overflow-hidden px-2 ${className}`}
       >
         <EditorContent
           editor={editor}
-          className="flex-1 min-w-0 overflow-x-auto"
+          className="flex-1 min-w-0 flex items-center"
         />
       </div>
     );
diff --git a/src/index.css b/src/index.css
index 9684d61..024a54a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -281,7 +281,9 @@ body.animating-layout
 
 /* TipTap Editor Styles */
 .ProseMirror {
-  min-height: 2rem;
+  min-height: 1.25rem;
+  display: flex;
+  align-items: center;
 }
 
 .ProseMirror:focus {
@@ -290,14 +292,14 @@ body.animating-layout
 
 .ProseMirror p {
   margin: 0;
+  flex: 1;
+  min-width: 0;
 }
 
 .ProseMirror p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
-  float: left;
   color: hsl(var(--muted-foreground));
   pointer-events: none;
-  height: 0;
 }
 
 /* Mention styles */