From adb2986a9bf18cc81f98f2363565882ae2ecc838 Mon Sep 17 00:00:00 2001
From: Antoine Phan <hoangtuan11102@gmail.com>
Date: Mon, 9 Feb 2026 00:13:59 -0500
Subject: [PATCH] Adjustment to layout

---
 src/components/council/CouncilCard.svelte |  4 ++-
 src/routes/council/+page.svelte           | 38 +++++++++--------------
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/components/council/CouncilCard.svelte b/src/components/council/CouncilCard.svelte
index a41ae96..d00e876 100644
--- a/src/components/council/CouncilCard.svelte
+++ b/src/components/council/CouncilCard.svelte
@@ -37,7 +37,9 @@
 			</span>
 		{/if}
 	</div>
-	<div class="flex flex-col items-center justify-center gap-2 p-3 text-center sm:p-4">
+	<div
+		class="flex flex-col items-center justify-center gap-2 px-2 py-3 text-center sm:px-3 sm:py-4"
+	>
 		<h3 class="text-ecsess-50 line-clamp-2 w-full text-base leading-tight font-bold sm:text-lg">
 			{name}
 		</h3>
diff --git a/src/routes/council/+page.svelte b/src/routes/council/+page.svelte
index 4da09b7..cb14e89 100644
--- a/src/routes/council/+page.svelte
+++ b/src/routes/council/+page.svelte
@@ -129,18 +129,14 @@
 				</h2>
 				<div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>
 			</div>
-			<div class="mt-8 flex flex-wrap justify-center gap-4">
+			<div class="mt-8 flex flex-wrap justify-center gap-6">
 				{#each vps as vp}
-					<div
-						class="flex min-w-full justify-center sm:min-w-[calc(50%-0.5rem)] lg:min-w-[calc(33.333%-0.67rem)] xl:min-w-[calc(25%-0.75rem)]"
-					>
-						<CouncilCard
-							name={vp.name}
-							position={vp.position}
-							image={vp.image}
-							onViewProfile={() => handleViewProfile(vp)}
-						/>
-					</div>
+					<CouncilCard
+						name={vp.name}
+						position={vp.position}
+						image={vp.image}
+						onViewProfile={() => handleViewProfile(vp)}
+					/>
 				{/each}
 			</div>
 		</section>
@@ -154,19 +150,15 @@
 				</h2>
 				<div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>
 			</div>
-			<div class="mt-8 flex flex-wrap justify-center gap-4">
+			<div class="mt-8 flex flex-wrap justify-center gap-6">
 				{#each ureps as urep}
-					<div
-						class="flex min-w-full justify-center sm:min-w-[calc(50%-0.5rem)] lg:min-w-[calc(33.333%-0.67rem)] xl:min-w-[calc(25%-0.75rem)]"
-					>
-						<CouncilCard
-							name={urep.name}
-							position={urep.position}
-							image={urep.image}
-							onViewProfile={() => handleViewProfile(urep)}
-							tag={getYearFromPosition(urep.position)}
-						/>
-					</div>
+					<CouncilCard
+						name={urep.name}
+						position={urep.position}
+						image={urep.image}
+						onViewProfile={() => handleViewProfile(urep)}
+						tag={getYearFromPosition(urep.position)}
+					/>
 				{/each}
 			</div>
 		</section>