From 60af173c4a666cb1fa87b8edf154cd97eec8f669 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Sun, 4 Aug 2024 14:48:44 +0530
Subject: [PATCH] Improve responsive spacing of chat page footer buttons

- Remove x axis footer padding on small screens to preserve space,
  keep equal spacing between footer items
- Add 1rem margin to buttons to not have overlap in boundary
- Add 1rem y-axis padding to chat footer to not have focus boundary
  leave the footer boundary on smaller screens
---
 src/interface/web/app/chat/chat.module.css      |  2 --
 src/interface/web/app/chat/page.tsx             |  2 +-
 .../components/chatInputArea/chatInputArea.tsx  | 17 ++++++++---------
 src/interface/web/app/page.tsx                  |  2 +-
 4 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/interface/web/app/chat/chat.module.css b/src/interface/web/app/chat/chat.module.css
index fd59a045..97f08a29 100644
--- a/src/interface/web/app/chat/chat.module.css
+++ b/src/interface/web/app/chat/chat.module.css
@@ -18,8 +18,6 @@ div.inputBox {
     border: 1px solid var(--border-color);
     margin-bottom: 20px;
     gap: 12px;
-    padding-left: 20px;
-    padding-right: 20px;
     align-content: center;
 }
 
diff --git a/src/interface/web/app/chat/page.tsx b/src/interface/web/app/chat/page.tsx
index ffb99ab8..c9dd3ddb 100644
--- a/src/interface/web/app/chat/page.tsx
+++ b/src/interface/web/app/chat/page.tsx
@@ -86,7 +86,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
                     incomingMessages={props.streamedMessages}
                 />
             </div>
-            <div className={`${styles.inputBox} shadow-md bg-background align-middle items-center justify-center px-3 dark:bg-neutral-700 dark:border-0 dark:shadow-sm rounded-t-2xl rounded-b-none md:rounded-xl`}>
+            <div className={`${styles.inputBox} p-1 md:px-2 shadow-md bg-background align-middle items-center justify-center dark:bg-neutral-700 dark:border-0 dark:shadow-sm rounded-t-2xl rounded-b-none md:rounded-xl`}>
                 <ChatInputArea
                     agentColor={agentMetadata?.color}
                     isLoggedIn={props.isLoggedIn}
diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index 5cbe3c4d..032c645e 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -7,7 +7,6 @@ import { Progress } from "@/components/ui/progress"
 
 import 'katex/dist/katex.min.css';
 import {
-    ArrowCircleUp,
     ArrowRight,
     ArrowUp,
     Browser,
@@ -370,10 +369,10 @@ export default function ChatInputArea(props: ChatInputProps) {
                 />
                 <Button
                     variant={'ghost'}
-                    className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
+                    className="!bg-none p-0 m-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
                     disabled={props.sendDisabled}
                     onClick={handleFileButtonClick}>
-                    <Paperclip className='w-6 h-6 md:w-8 md:h-8' />
+                    <Paperclip className='w-8 h-8' />
                 </Button>
                 <div className="grid w-full gap-1.5 relative">
                     <Textarea
@@ -399,13 +398,13 @@ export default function ChatInputArea(props: ChatInputProps) {
                                 <TooltipTrigger asChild>
                                     <Button
                                         variant={'ghost'}
-                                        className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
+                                        className="!bg-none p-0 m-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
                                         onClick={() => {
                                             setRecording(!recording);
                                         }}
                                         disabled={props.sendDisabled}
                                     >
-                                        <Stop weight='fill' className='w-6 h-6 md:w-8 md:h-8' />
+                                        <Stop weight='fill' className='w-8 h-8' />
                                     </Button>
                                 </TooltipTrigger>
                                 <TooltipContent>
@@ -423,14 +422,14 @@ export default function ChatInputArea(props: ChatInputProps) {
                                         <TooltipTrigger asChild>
                                             <Button
                                                 variant={'ghost'}
-                                                className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
+                                                className="!bg-none p-0 m-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
                                                 onClick={() => {
                                                     setMessage("Listening...");
                                                     setRecording(!recording);
                                                 }}
                                                 disabled={props.sendDisabled}
                                             >
-                                                <Microphone weight='fill' className='w-6 h-6 md:w-8 md:h-8' />
+                                                <Microphone weight='fill' className='w-8 h-8' />
                                             </Button>
                                         </TooltipTrigger>
                                         <TooltipContent>
@@ -441,10 +440,10 @@ export default function ChatInputArea(props: ChatInputProps) {
                         )
                 }
                 <Button
-                    className={`${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-1 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-1 mr-1 h-auto text-3xl transition transform hover:-translate-y-1`}
                     onClick={onSendMessage}
                     disabled={props.sendDisabled}>
-                    <ArrowUp className='w-4 h-4 md:w-6 md:h-6' weight='bold' />
+                    <ArrowUp className='w-6 h-6' weight='bold' />
                 </Button>
             </div >
         </>
diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx
index 694f5b9b..e77589a1 100644
--- a/src/interface/web/app/page.tsx
+++ b/src/interface/web/app/page.tsx
@@ -184,7 +184,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
                     </div>
                 }
             </div>
-            <div className={`ml-auto mr-auto ${props.isMobileWidth ? 'w-full' : 'w-fit'}`}>
+            <div className={`mx-auto ${props.isMobileWidth ? 'w-full' : 'w-fit'}`}>
                 {
                     !props.isMobileWidth &&
                     <div className={`w-full ${styles.inputBox} shadow-lg bg-background align-middle items-center justify-center px-3 py-1 dark:bg-neutral-700 border-stone-100 dark:border-none dark:shadow-none rounded-2xl`}>