From 6cb47c25e9042c37f13a89753d3b4a324fe54241 Mon Sep 17 00:00:00 2001
From: Laurian-Dufrechou <lauriandugers@hotmail.fr>
Date: Sat, 20 May 2023 20:13:09 +0200
Subject: [PATCH] fix(Modal invite / image fix ): fix display : scrollable
 horizontaly

---
 src/components/layout/map/ModalInviteBar.tsx   |  3 ---
 .../layout/profile/ModalModifyImages.tsx       | 18 +++++++++++++-----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/layout/map/ModalInviteBar.tsx b/src/components/layout/map/ModalInviteBar.tsx
index 5775457..029f194 100644
--- a/src/components/layout/map/ModalInviteBar.tsx
+++ b/src/components/layout/map/ModalInviteBar.tsx
@@ -120,9 +120,6 @@ export default function ModalInviteBar({
             <Grid
               {...getRootProps()}
               templateColumns={`repeat(${notificationMatch?.length}, 50%)`}
-              // templateColumns={`repeat(auto-fill, ${notificationMatch?.length})`}
-              // make all items be in the same line and make it scrollable horizontally
-
               gap={6}
             >
               {!isError && !error
diff --git a/src/components/layout/profile/ModalModifyImages.tsx b/src/components/layout/profile/ModalModifyImages.tsx
index 63cf2d6..dd03496 100644
--- a/src/components/layout/profile/ModalModifyImages.tsx
+++ b/src/components/layout/profile/ModalModifyImages.tsx
@@ -131,13 +131,20 @@ export default function ModalModifyImages(props) {
           <ModalCloseButton />
           <ModalBody>
             <Grid
-              templateColumns={`repeat(${listImage.length + 1}, 1fr)`}
+              templateColumns={`repeat(${listImage.length + 1}, 50%)`}
               gap={5}
             >
               {listImage.map((image, index) => (
                 <GridItem key={index}>
-                  <Flex direction={"column"} gap={"1rem"}>
-                    <Image src={image} />
+                  <Flex
+                    bg={"purple.100"}
+                    height={"100%"}
+                    direction={"column"}
+                    gap={"1rem"}
+                    justifyContent={"space-between"}
+                    borderRadius={"0.5rem"}
+                  >
+                    <Image src={image} borderRadius={"0.5rem"} />
                     <Button
                       id={index.toString()}
                       colorScheme={"red"}
@@ -151,11 +158,12 @@ export default function ModalModifyImages(props) {
               {listImage.length < 5 && (
                 <GridItem width={"100%"}>
                   <Input
+                    bg={"purple.100"}
                     type={"file"}
-                    height={"100%"}
                     accept={"image/png, image/jpeg, image/webp"}
                     onInput={({ target }) => {
-                      if (target.files[0]) return;
+                      if (target.files[0] === undefined) return;
+
                       const date = new Date();
                       const time = date.getTime();