From 0e102fb2b377b887f8b3381cb3eb17f6fdbc840c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 12 Jan 2026 21:13:48 +0000
Subject: [PATCH] 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
---
 src/components/ChatViewer.tsx           | 9 +++++----
 src/components/editor/MentionEditor.tsx | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/ChatViewer.tsx b/src/components/ChatViewer.tsx
index ade187f..de046e9 100644
--- a/src/components/ChatViewer.tsx
+++ b/src/components/ChatViewer.tsx
@@ -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>
diff --git a/src/components/editor/MentionEditor.tsx b/src/components/editor/MentionEditor.tsx
index a9423eb..1d592af 100644
--- a/src/components/editor/MentionEditor.tsx
+++ b/src/components/editor/MentionEditor.tsx
@@ -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}