Fix chat composer placeholder and text alignment (#84)

* 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.

* Fix cursor placement in chat composer placeholder

- Changed from flexbox to line-height for vertical centering
- Removed flex from .ProseMirror to fix cursor positioning
- Set line-height: 1.25rem to match min-height for proper alignment
- Removed flex items-center from EditorContent className

This ensures the cursor appears at the correct position when focusing
the input field, rather than after the placeholder text.

* Fix cursor placement on mobile devices

- Made placeholder absolutely positioned to prevent it from affecting cursor
- Added position: relative to .ProseMirror container
- This ensures cursor appears at the start of input on mobile browsers

The absolute positioning removes the placeholder from the normal layout flow,
preventing mobile browsers from placing the cursor after the pseudo-element.

---------

Co-authored-by: Claude <noreply@anthropic.com>

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,12 +886,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 h-7 flex items-center overflow-hidden px-2 ${className}`}
       >
-        <EditorContent
-          editor={editor}
-          className="flex-1 min-w-0 overflow-x-auto"
-        />
+        <EditorContent editor={editor} className="flex-1 min-w-0" />
       </div>
     );
   },

src/index.css

@@ -281,7 +281,9 @@ body.animating-layout
 
 /* TipTap Editor Styles */
 .ProseMirror {
-  min-height: 2rem;
+  min-height: 1.25rem;
+  line-height: 1.25rem;
+  position: relative;
 }
 
 .ProseMirror:focus {
@@ -290,14 +292,16 @@ body.animating-layout
 
 .ProseMirror p {
   margin: 0;
+  line-height: 1.25rem;
 }
 
 .ProseMirror p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
-  float: left;
   color: hsl(var(--muted-foreground));
   pointer-events: none;
-  height: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
 }
 
 /* Mention styles */