mirror of
https://github.com/purrgrammer/grimoire.git
synced 2026-06-06 10:41:21 +02:00
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.
This commit is contained in:
@@ -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>
|
||||
);
|
||||
},
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user