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,37 +47,38 @@ export default function AvailabilitySelector({
 	}
 
 	return (
-		<Select
-			items={availabilities.items}
-			label={<h4>Availability</h4>}
-			variant="bordered"
-			className={className}
-			classNames={{ label: "text-base", trigger: "py-4" }}
-			labelPlacement="outside"
-			placeholder="Set availability"
-			renderValue={(availability) => (
-				<div>
-					{availability.map((a) =>
-						!!a.data ? (
-							<AvailabilityChip key={a.key} availability={a.data} />
-						) : null,
-					)}
-				</div>
-			)}
-			selectedKeys={value}
-			onSelectionChange={(a) => {
-				void setAvailability(event.eventID, parseInt(a.anchorKey ?? ""));
-				setValue(a);
-			}}
-		>
-			{(availability) => (
-				<SelectItem
-					key={availability.availabilityID}
-					textValue={availability.availabilityName}
-				>
-					<AvailabilityChip availability={availability} />
-				</SelectItem>
-			)}
-		</Select>
+		<div className={classNames(className, "w-full")}>
+			<Select
+				items={availabilities.items}
+				label={<h4>Availability</h4>}
+				variant="bordered"
+				classNames={{ label: "text-base", trigger: "py-4" }}
+				labelPlacement="outside"
+				placeholder="Set availability"
+				renderValue={(availability) => (
+					<div>
+						{availability.map((a) =>
+							!!a.data ? (
+								<AvailabilityChip key={a.key} availability={a.data} />
+							) : null,
+						)}
+					</div>
+				)}
+				selectedKeys={value}
+				onSelectionChange={(a) => {
+					void setAvailability(event.eventID, parseInt(a.anchorKey ?? ""));
+					setValue(a);
+				}}
+			>
+				{(availability) => (
+					<SelectItem
+						key={availability.availabilityID}
+						textValue={availability.availabilityName}
+					>
+						<AvailabilityChip availability={availability} />
+					</SelectItem>
+				)}
+			</Select>
+		</div>
 	);
 }