fully responsive event page and components

src/pages/Events/EventsPage.jsx

@@ -222,11 +222,6 @@ function EventsPage(){
 
     return (
         <div className={styles.eventsContainer}>
-            <div className={styles.eventsList}>
-                {sortedEvents.map((event, index) => (
-                    <Event key={index} event={event} />
-                ))}
-            </div>
             <div className={styles.eventsButtons}>
                 <Link
                     to="/event/create"
@@ -244,6 +239,11 @@ function EventsPage(){
                     </div>
                 </div>
             </div>
+            <div className={styles.eventsList}>
+                {sortedEvents.map((event, index) => (
+                    <Event key={index} event={event} />
+                ))}
+            </div>
         </div>
     )
 }

src/pages/Events/EventsPage.module.css

@@ -72,3 +72,28 @@
 }
 
 
+@media screen and (max-width: 768px) {
+    .eventsButtons {
+        flex-direction: row;
+        position: relative;
+        top: 0;
+        right: 0;
+        align-items: flex-start;
+        width: 100%;
+        margin-top: 16px;
+    }
+
+    .filterContainer{
+        display: flex;
+        width: fit-content;
+    }
+
+    .filterMenu{
+        width: fit-content;
+    }
+
+    .createButton:hover, .mobileFilter:hover {
+        transform: none !important;
+    }
+}
+