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:
Alejandro
2026-01-12 22:21:03 +01:00
committed by GitHub
parent 20eb19bdbb
commit cf1f384691
2 changed files with 6 additions and 5 deletions

View File

@@ -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>

View File

@@ -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}