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
This commit is contained in:
Debanjum Singh Solanky 2024-08-04 04:01:19 +05:30
parent 5541bc09c8
commit 2f7a8698a0
2 changed files with 2 additions and 2 deletions

View file

@ -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' />

View file

@ -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