From 516277c77dd5f1e239080fc302c2f8a79eafc9db Mon Sep 17 00:00:00 2001
From: Giovanni-Josserand <josserand.giovanni@gmail.com>
Date: Wed, 10 Dec 2025 11:51:14 +0100
Subject: [PATCH] fix some responsive

---
 src/components/Event/Event.module.css         |  1 +
 src/components/SearchBar/SearchBar.jsx        | 57 ++++++++++---------
 src/components/SearchBar/SearchBar.module.css | 14 ++++-
 src/components/ToolBar/ToolBar.module.css     | 16 +++++-
 4 files changed, 56 insertions(+), 32 deletions(-)

diff --git a/src/components/Event/Event.module.css b/src/components/Event/Event.module.css
index 22c5fe8..021f7bd 100644
--- a/src/components/Event/Event.module.css
+++ b/src/components/Event/Event.module.css
@@ -41,6 +41,7 @@
 
 .eventContent {
     display: flex;
+    width: 100%;
 }
 
 .eventTitle {
diff --git a/src/components/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx
index 50c3566..d79dfde 100644
--- a/src/components/SearchBar/SearchBar.jsx
+++ b/src/components/SearchBar/SearchBar.jsx
@@ -65,36 +65,37 @@ function SearchBar() {
                 ) : null}
             </div>
 
-
-            {searchResults.map((result, i) => (
-                (location.pathname.includes("events")) ? (
-                    <Link to={`/event/` + result.id}>
-                        <div className={styles.searchedEvent} key={i}>
-                            <div className={`${styles.eventImageDiv}`}>
-                                {result.image == null ? (
-                                    <img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
-                                ) : (
-                                    <img src={result.image + `.png`} alt="Photo de l'événement" />
-                                )}
+            <div className={styles.elementList}>
+                {searchResults.map((result, i) => (
+                    (location.pathname.includes("events")) ? (
+                        <Link to={`/event/` + result.id}>
+                            <div className={styles.searchedEvent} key={i}>
+                                <div className={`${styles.eventImageDiv}`}>
+                                    {result.image == null ? (
+                                        <img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
+                                    ) : (
+                                        <img src={result.image + `.png`} alt="Photo de l'événement" />
+                                    )}
+                                </div>
+                                <p>{result.name}</p>
                             </div>
-                            <p>{result.name}</p>
-                        </div>
-                    </Link>
-                ) : location.pathname.includes("volunteers") ? (
-                    <Link to={`/profile/` + result.id}>
-                        <div className={styles.searchedEvent} key={i}>
-                            <div className={`${styles.eventImageDiv}`}>
-                                {result.image == null ? (
-                                    <img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
-                                ) : (
-                                    <img src={result.image + `.png`} alt="Photo de l'événement" />
-                                )}
+                        </Link>
+                    ) : location.pathname.includes("volunteers") ? (
+                        <Link to={`/profile/` + result.id}>
+                            <div className={styles.searchedEvent} key={i}>
+                                <div className={`${styles.eventImageDiv}`}>
+                                    {result.image == null ? (
+                                        <img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
+                                    ) : (
+                                        <img src={result.image + `.png`} alt="Photo de l'événement" />
+                                    )}
+                                </div>
+                                <p>{result.name} {result.lastname}</p>
                             </div>
-                            <p>{result.name} {result.lastname}</p>
-                        </div>
-                    </Link>
-                ) : null
-            ))}
+                        </Link>
+                    ) : null
+                ))}
+            </div>
         </div>
     );
 }
diff --git a/src/components/SearchBar/SearchBar.module.css b/src/components/SearchBar/SearchBar.module.css
index 579af04..a58f1de 100644
--- a/src/components/SearchBar/SearchBar.module.css
+++ b/src/components/SearchBar/SearchBar.module.css
@@ -1,6 +1,6 @@
 .searchBarContainer{
     position: fixed;
-    top: 10rem;
+    top: 4rem;
     z-index: 100;
     width: 60%;
     background: #fff;
@@ -11,6 +11,11 @@
     display: flex;
 }
 
+.elementList {
+    max-height: 60vh;
+    overflow-y: auto;
+}
+
 
 
 .eventImageDiv {
@@ -72,3 +77,10 @@
 .searchBarForm input:focus{
     outline: none;
 }
+
+
+@media screen and (max-width: 480px) {
+    .searchBarContainer{
+        width: 80%;
+    }
+}
diff --git a/src/components/ToolBar/ToolBar.module.css b/src/components/ToolBar/ToolBar.module.css
index 79e8a03..1b53950 100644
--- a/src/components/ToolBar/ToolBar.module.css
+++ b/src/components/ToolBar/ToolBar.module.css
@@ -20,6 +20,7 @@
 
 .filterMenu{
     padding: 5px 5px 5px 5px;
+    width: fit-content;
 }
 
 .createButton, .searchButton, .sortButton {
@@ -27,9 +28,9 @@
     align-items: center;
     justify-content: center;
     border: none;
-    border-radius: 50%;
-    width: 55px;
-    height: 55px;
+    border-radius: 50% !important;
+    width: 55px !important;
+    height: 55px !important;
     transition: all 0.5s ease;
 }
 
@@ -72,6 +73,15 @@
 
 
 @media screen and (max-width: 768px) {
+    .createButton,
+    .searchButton,
+    .sortButton {
+        flex: 0 0 55px;
+        width: 55px !important;
+        height: 55px !important;
+    }
+
+
     .eventsButtons {
         flex-direction: row;
         position: relative;