refactor(frontend): Improve chat input padding (#4928)

All-Hands-AI · Nov 14, 2024 · 89b304c · 89b304c
1 parent 01cacf7
commit 89b304c
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 7 deletions.
diff --git a/frontend/src/components/chat-input.tsx b/frontend/src/components/chat-input.tsx
@@ -18,6 +18,7 @@ interface ChatInputProps {
   onBlur?: () => void;
   onImagePaste?: (files: File[]) => void;
   className?: React.HTMLAttributes<HTMLDivElement>["className"];
+  buttonClassName?: React.HTMLAttributes<HTMLButtonElement>["className"];
 }
 
 export function ChatInput({
@@ -35,6 +36,7 @@ export function ChatInput({
   onBlur,
   onImagePaste,
   className,
+  buttonClassName,
 }: ChatInputProps) {
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);
   const [isDraggingOver, setIsDraggingOver] = React.useState(false);
@@ -100,7 +102,7 @@ export function ChatInput({
   return (
     <div
       data-testid="chat-input"
-      className="flex items-end justify-end grow gap-1 min-h-6"
+      className="flex items-end justify-end grow gap-1 min-h-6 w-full"
     >
       <TextareaAutosize
         ref={textareaRef}
@@ -128,7 +130,7 @@ export function ChatInput({
         )}
       />
       {showButton && (
-        <>
+        <div className={buttonClassName}>
           {button === "submit" && (
             <button
               aria-label="Send"
@@ -152,7 +154,7 @@ export function ChatInput({
               <div className="w-[10px] h-[10px] bg-white" />
             </button>
           )}
-        </>
+        </div>
       )}
     </div>
   );

diff --git a/frontend/src/components/interactive-chat-box.tsx b/frontend/src/components/interactive-chat-box.tsx
@@ -56,7 +56,7 @@ export function InteractiveChatBox({
       <div
         className={cn(
           "flex items-end gap-1",
-          "bg-neutral-700 border border-neutral-600 rounded-lg px-2 py-[10px]",
+          "bg-neutral-700 border border-neutral-600 rounded-lg px-2",
           "transition-colors duration-200",
           "hover:border-neutral-500 focus-within:border-neutral-500",
         )}
@@ -71,6 +71,8 @@ export function InteractiveChatBox({
           onStop={onStop}
           value={value}
           onImagePaste={handleUpload}
+          className="py-[10px]"
+          buttonClassName="py-[10px]"
         />
       </div>
     </div>

diff --git a/frontend/src/components/upload-image-input.tsx b/frontend/src/components/upload-image-input.tsx
@@ -11,7 +11,7 @@ export function UploadImageInput({ onUpload, label }: UploadImageInputProps) {
   };
 
   return (
-    <label className="cursor-pointer">
+    <label className="cursor-pointer py-[10px]">
       {label || <Clip data-testid="default-label" width={24} height={24} />}
       <input
         data-testid="upload-image-input"

diff --git a/frontend/src/routes/_oh._index/task-form.tsx b/frontend/src/routes/_oh._index/task-form.tsx
@@ -67,7 +67,7 @@ export function TaskForm() {
         />
         <div
           className={cn(
-            "border border-neutral-600 px-4 py-[17px] rounded-lg text-[17px] leading-5 w-full transition-colors duration-200",
+            "border border-neutral-600 px-4 rounded-lg text-[17px] leading-5 w-full transition-colors duration-200",
             inputIsFocused ? "bg-neutral-600" : "bg-neutral-700",
             "hover:border-neutral-500 focus-within:border-neutral-500",
           )}
@@ -91,7 +91,8 @@ export function TaskForm() {
             value={text}
             maxRows={15}
             showButton={!!text}
-            className="text-[17px] leading-5"
+            className="text-[17px] leading-5 py-[17px]"
+            buttonClassName="pb-[17px]"
             disabled={navigation.state === "submitting"}
           />
         </div>