adjusted overview styling

client/src/app/MyEvents.tsx

@@ -31,7 +31,11 @@ export default function MyEvents() {
 		<div className="flex justify-center gap-4">
 			{events.items.map((e) => (
 				<Event key={e.eventID} event={e}>
-					<AssignmentTable tasks={e.tasks} highlightUser={user?.userName} />
+					<AssignmentTable
+						className="mt-auto"
+						tasks={e.tasks}
+						highlightUser={user?.userName}
+					/>
 				</Event>
 			))}
 		</div>

client/src/app/Overview.tsx

@@ -1,19 +0,0 @@
-import MyEvents from "./MyEvents";
-import PendingEvents from "./PendingEvents";
-
-export default function Overview() {
-	return (
-		<div className="relative flex-1 grid-cols-2 lg:grid">
-			<div>
-				<h1 className="mb-4 text-center text-4xl">My Events</h1>
-				<MyEvents />
-			</div>
-			<div>
-				<h1 className="mb-4 mt-8 text-center text-4xl lg:mt-0">
-					Pending Events
-				</h1>
-				<PendingEvents />
-			</div>
-		</div>
-	);
-}

client/src/app/page.tsx

@@ -1,5 +1,19 @@
-import Overview from "./Overview";
+import MyEvents from "./MyEvents";
+import PendingEvents from "./PendingEvents";
 
-export default function Home() {
-	return <Overview />;
+export default function Overview() {
+	return (
+		<div className="relative mx-auto flex-1 grid-cols-2 lg:grid lg:max-w-screen-lg">
+			<div>
+				<h1 className="mb-4 text-center text-4xl">My Events</h1>
+				<MyEvents />
+			</div>
+			<div>
+				<h1 className="mb-4 mt-8 text-center text-4xl lg:mt-0">
+					Pending Events
+				</h1>
+				<PendingEvents />
+			</div>
+		</div>
+	);
 }