mirror of
https://github.com/purrgrammer/grimoire.git
synced 2026-06-05 02:01:22 +02:00
Make chat composer more compact (#68)
* ui: make chat composer more compact - Reduce input and button height from 2.5rem to 1.75rem (h-7) - Reduce padding from px-3 py-1.5 to px-2 py-1 - Use text-sm for consistent sizing with chat messages - Make Send button smaller with text-xs and smaller icon - Tighten gap between input and button * ui: remove bottom padding from chat composer --------- Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -763,7 +763,7 @@ export function ChatViewer({
|
||||
onClear={() => setReplyTo(undefined)}
|
||||
/>
|
||||
)}
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="flex gap-1.5 items-center">
|
||||
<MentionEditor
|
||||
ref={editorRef}
|
||||
placeholder="Type a message..."
|
||||
@@ -779,13 +779,14 @@ export function ChatViewer({
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
className="flex-shrink-0 h-[2.5rem]"
|
||||
size="sm"
|
||||
className="flex-shrink-0 h-7 px-2 text-xs"
|
||||
disabled={isSending}
|
||||
onClick={() => {
|
||||
editorRef.current?.submit();
|
||||
}}
|
||||
>
|
||||
{isSending ? <Loader2 className="size-4 animate-spin" /> : "Send"}
|
||||
{isSending ? <Loader2 className="size-3 animate-spin" /> : "Send"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -511,7 +511,7 @@ export const MentionEditor = forwardRef<
|
||||
editorProps: {
|
||||
attributes: {
|
||||
class:
|
||||
"prose prose-sm max-w-none focus:outline-none min-h-[2rem] px-3 py-1.5 whitespace-nowrap",
|
||||
"prose prose-sm max-w-none focus:outline-none min-h-[1.25rem] px-2 py-1 whitespace-nowrap text-sm",
|
||||
},
|
||||
},
|
||||
autofocus: autoFocus,
|
||||
@@ -551,7 +551,7 @@ export const MentionEditor = forwardRef<
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`rounded-md border bg-background transition-colors focus-within:border-primary h-[2.5rem] flex items-center overflow-hidden ${className}`}
|
||||
className={`rounded border bg-background transition-colors focus-within:border-primary h-7 flex items-center overflow-hidden ${className}`}
|
||||
>
|
||||
<EditorContent
|
||||
editor={editor}
|
||||
|
||||
Reference in New Issue
Block a user