From ead95020f9e30ff2906189f33e4ff5487e245f00 Mon Sep 17 00:00:00 2001
From: shivanshiv <shivanshi.visvanatha@ucalgary.ca>
Date: Mon, 24 Nov 2025 03:00:16 -0700
Subject: [PATCH] Fixes #65

---
 src/components/ApplySection.tsx |  2 +-
 src/pageLayouts/ApplyPage.tsx   | 36 +++++++++++++++++----------------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/ApplySection.tsx b/src/components/ApplySection.tsx
index a60d72b..35e06d0 100644
--- a/src/components/ApplySection.tsx
+++ b/src/components/ApplySection.tsx
@@ -9,7 +9,7 @@ type ApplySectionProps = {
 
 const ApplySection = (props: ApplySectionProps) => (
   <div
-    className="relative mb-[30%] rounded-[10px] bg-white p-5 text-center text-[clamp(16px,_calc(0.15vw+16px),_22px)] font-light leading-[30px] text-[rgb(20,20,20)] md:mb-[5%] md:w-[30%]"
+    className="relative mb-[30%] rounded-[10px] bg-white p-8 text-center text-[clamp(16px,_calc(0.15vw+16px),_22px)] font-light leading-[30px] text-[rgb(20,20,20)] md:mb-[5%] md:w-[30%]"
     data-aos="fade-down"
     data-aos-duration="1000"
   >
diff --git a/src/pageLayouts/ApplyPage.tsx b/src/pageLayouts/ApplyPage.tsx
index 936b73a..da66396 100644
--- a/src/pageLayouts/ApplyPage.tsx
+++ b/src/pageLayouts/ApplyPage.tsx
@@ -295,23 +295,25 @@ const ApplyPage = () => {
           width={200}
         />
 
-        <h1 className="chonkyHeading chonkyHeading--dynamic chonkyHeading--lessMargin">
-          Applications
-        </h1>
-        <Divider />
-        <ul className="md:inline-flex">
-          {applications.map((section, index) => (
-            <ApplySection
-              applicationLink={section.applicationLink}
-              closedStatus={section.closedStatus}
-              deadline={section.deadline}
-              description={section.description}
-              key={index}
-              role={section.role}
-              statusIsOpen={section.statusIsOpen}
-            />
-          ))}
-        </ul>
+        <div className="relative z-10 my-[5%]">
+          <h1 className="chonkyHeading chonkyHeading--dynamic chonkyHeading--lessMargin">
+            Applications
+          </h1>
+          <Divider />
+          <ul className="mx-auto flex w-4/5 max-w-[1200px] flex-col justify-between gap-8 md:flex-row">
+            {applications.map((section, index) => (
+              <ApplySection
+                applicationLink={section.applicationLink}
+                closedStatus={section.closedStatus}
+                deadline={section.deadline}
+                description={section.description}
+                key={index}
+                role={section.role}
+                statusIsOpen={section.statusIsOpen}
+              />
+            ))}
+          </ul>
+        </div>
       </div>
     </div>
   );