From 7646ac67791fe351f88fd0b16bac13e685ffe95c Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Sun, 20 Oct 2024 00:40:08 -0700
Subject: [PATCH] Style user attached images as carousel on chat input area of
 web app

---
 .../app/components/chatInputArea/chatInputArea.module.css   | 1 +
 .../web/app/components/chatInputArea/chatInputArea.tsx      | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.module.css b/src/interface/web/app/components/chatInputArea/chatInputArea.module.css
index cfee75f1..5561b158 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.module.css
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.module.css
@@ -1,4 +1,5 @@
 div.actualInputArea {
     display: grid;
     grid-template-columns: auto 1fr auto auto;
+    max-width: 700px;
 }
diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index 131b4de4..944348ad 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -427,10 +427,10 @@ export default function ChatInputArea(props: ChatInputProps) {
                     </Button>
                 </div>
                 <div className="flex-grow flex flex-col w-full gap-1.5 relative pb-2">
-                    <div className="flex flex-wrap items-center gap-2">
+                    <div className="flex items-center gap-2 overflow-x-auto">
                         {imageUploaded &&
                             imagePaths.map((path, index) => (
-                                <div key={index} className="relative flex-shrink-0 group">
+                                <div key={index} className="relative flex-shrink-0 pb-3 pt-2 group">
                                     <img
                                         src={path}
                                         alt={`img-${index}`}
@@ -439,7 +439,7 @@ export default function ChatInputArea(props: ChatInputProps) {
                                     <Button
                                         variant="ghost"
                                         size="icon"
-                                        className="absolute -top-2 -right-2 h-5 w-5 rounded-full bg-neutral-200 dark:bg-neutral-600 hover:bg-neutral-300 dark:hover:bg-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity"
+                                        className="absolute -top-0 -right-2 h-5 w-5 rounded-full bg-neutral-200 dark:bg-neutral-600 hover:bg-neutral-300 dark:hover:bg-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity"
                                         onClick={() => removeImageUpload(index)}
                                     >
                                         <X className="h-3 w-3" />