fixed styling of events modal

client/src/app/MyEvents.tsx

@@ -28,15 +28,13 @@ export default function MyEvents() {
 		},
 	});
 
-	console.debug(events);
-
 	return (
 		<div>
 			<h1 className="mb-4 text-center text-4xl">My Events</h1>
 			{events.isLoading ? (
 				<Loading />
 			) : events.items.length > 0 ? (
-				<div className="flex justify-center gap-4">
+				<div className="flex flex-wrap justify-center gap-4">
 					{events.items.map((e) => (
 						<Event key={e.eventID} event={e}>
 							<AssignmentTable

client/src/app/PendingEvents.tsx

@@ -36,7 +36,7 @@ export default function PendingEvents() {
 			{events.isLoading ? (
 				<Loading />
 			) : events.items.length > 0 ? (
-				<div className="flex justify-center gap-4">
+				<div className="flex flex-wrap justify-center gap-4">
 					{events.items.map((e) => (
 						<Event key={e.eventID} event={e}>
 							<AvailabilitySelector event={e} className="mt-auto" />

client/src/app/events/page.tsx

@@ -67,7 +67,7 @@ export default function Events() {
 				<Tab key="assigned" title="Assigned" />
 			</Tabs>
 
-			<div className="flex flex-wrap justify-center gap-4">
+			<div className="mx-auto flex flex-wrap gap-4">
 				{events.items.filter(showEvent).map((e) => (
 					<Event key={e.eventID} event={e}>
 						<AssignmentTable

client/src/app/page.tsx

@@ -3,7 +3,7 @@ import PendingEvents from "./PendingEvents";
 
 export default function Overview() {
 	return (
-		<div className="relative mx-auto flex-1 grid-cols-2 gap-8 lg:grid lg:max-w-screen-lg">
+		<div className="relative mx-auto flex-1 grid-cols-2 gap-8 lg:grid lg:max-w-screen-xl">
 			<MyEvents />
 			<PendingEvents />
 		</div>

client/src/components/Event/AvailabilitySelector.tsx

@@ -1,6 +1,6 @@
 import { Select, Selection, SelectItem } from "@heroui/react";
 import AvailabilityChip from "../AvailabilityChip";
-import { apiCall, getAvailabilities } from "@/lib";
+import { apiCall, classNames, getAvailabilities } from "@/lib";
 import { useAsyncList } from "@react-stately/data";
 import { EventAvailability } from "@/Zustand";
 import { useState } from "react";
@@ -47,11 +47,11 @@ export default function AvailabilitySelector({
 	}
 
 	return (
+		<div className={classNames(className, "w-full")}>
 			<Select
 				items={availabilities.items}
 				label={<h4>Availability</h4>}
 				variant="bordered"
-			className={className}
 				classNames={{ label: "text-base", trigger: "py-4" }}
 				labelPlacement="outside"
 				placeholder="Set availability"
@@ -79,5 +79,6 @@ export default function AvailabilitySelector({
 					</SelectItem>
 				)}
 			</Select>
+		</div>
 	);
 }