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
This commit is contained in:
Claude
2026-01-12 21:13:48 +00:00
parent 20eb19bdbb
commit 0e102fb2b3
2 changed files with 7 additions and 6 deletions

View File

@@ -756,14 +756,14 @@ export function ChatViewer({
{/* Message composer - only show if user has active account */}
{hasActiveAccount ? (
<div className="border-t px-2 py-1 pb-0">
<div className="border-t px-2 py-1">
{replyTo && (
<ComposerReplyPreview
replyToId={replyTo}
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}