From 2f7a8698a0b55e82eb9d0919aff28eecf2d8d4f3 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Sun, 4 Aug 2024 04:01:19 +0530
Subject: [PATCH] Fix width and equalize spacing between buttons in chat footer

Previously the footer's right border wasn't visible on small screens
due to usage of w-full

Use mr-1 on send button instead of px-1 on chat input parent to
eualize chat footer buttons spacing
---
 .../web/app/components/chatInputArea/chatInputArea.tsx          | 2 +-
 src/interface/web/app/page.tsx                                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index e9bb9218..1b66f577 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -440,7 +440,7 @@ export default function ChatInputArea(props: ChatInputProps) {
                         )
                 }
                 <Button
-                    className={`${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-0 h-auto text-3xl transition transform hover:-translate-y-1`}
+                    className={`${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-0 mr-1 h-auto text-3xl transition transform hover:-translate-y-1`}
                     onClick={onSendMessage}
                     disabled={props.sendDisabled}>
                     <ArrowCircleUp className='w-8 h-8' />
diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx
index cf12eb04..8fbaca47 100644
--- a/src/interface/web/app/page.tsx
+++ b/src/interface/web/app/page.tsx
@@ -232,7 +232,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
             {
                 props.isMobileWidth &&
                 <>
-                    <div className={`${styles.inputBox} w-full pt-1 shadow-[0_-20px_25px_-5px_rgba(0,0,0,0.1)] shadow-[0_-8px_10px_-6px_rgba(0,0,0,0.1)] dark:bg-neutral-700 bg-background align-middle items-center justify-center pb-3 px-1`}>
+                    <div className={`${styles.inputBox} pt-1 shadow-[0_-20px_25px_-5px_rgba(0,0,0,0.1)] shadow-[0_-8px_10px_-6px_rgba(0,0,0,0.1)] dark:bg-neutral-700 bg-background align-middle items-center justify-center pb-3 mx-1`}>
                         <div className="flex gap-2 items-center justify-left pt-1 pb-2 px-10">
                             {agentIcons.map((icon, index) => (
                                 <Card