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>