From cf1f384691498e3f8b15b431372de8477b6bfb18 Mon Sep 17 00:00:00 2001
From: Alejandro <alejandrogomez@bitrefill.com>
Date: Mon, 12 Jan 2026 22:21:03 +0100
Subject: [PATCH] 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>
---
 src/components/ChatViewer.tsx           | 7 ++++---
 src/components/editor/MentionEditor.tsx | 4 ++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/ChatViewer.tsx b/src/components/ChatViewer.tsx
index ade187f..6906967 100644
--- a/src/components/ChatViewer.tsx
+++ b/src/components/ChatViewer.tsx
@@ -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>
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}