From 7036fb5539ed014346f2485041cb5c175e14332f Mon Sep 17 00:00:00 2001
From: Alejandro <alejandrogomez@bitrefill.com>
Date: Tue, 13 Jan 2026 22:07:04 +0100
Subject: [PATCH] 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 | 10 +++-------
 src/index.css                           | 10 +++++++---
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/editor/MentionEditor.tsx b/src/components/editor/MentionEditor.tsx
index 7fadd8a..aa92bc1 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,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>
     );
   },
diff --git a/src/index.css b/src/index.css
index 9684d61..d6c47f4 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;
+  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 */