fix some responsive

src/components/Event/Event.module.css

@@ -41,6 +41,7 @@
 
 .eventContent {
     display: flex;
+    width: 100%;
 }
 
 .eventTitle {

src/components/SearchBar/SearchBar.jsx

@@ -65,7 +65,7 @@ function SearchBar() {
                 ) : null}
             </div>
 
-
+            <div className={styles.elementList}>
                 {searchResults.map((result, i) => (
                     (location.pathname.includes("events")) ? (
                         <Link to={`/event/` + result.id}>
@@ -96,6 +96,7 @@ function SearchBar() {
                     ) : null
                 ))}
             </div>
+        </div>
     );
 }
 

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%;
+    }
+}

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;