From 2a91d9e5bf213e1e2e97c400848c0c810c46fb1f Mon Sep 17 00:00:00 2001
From: Antoine Phan <hoangtuan11102@gmail.com>
Date: Mon, 9 Feb 2026 17:36:30 -0500
Subject: [PATCH] Finishing updating the new council page

---
 src/components/council/CouncilAvatar.svelte    |  4 +---
 src/components/council/CouncilCard.svelte      | 18 +++++++++---------
 src/components/council/CouncilCardPopUp.svelte |  5 ++++-
 src/routes/council/+page.svelte                | 14 ++++++--------
 4 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/components/council/CouncilAvatar.svelte b/src/components/council/CouncilAvatar.svelte
index 0f19a3d..985df74 100644
--- a/src/components/council/CouncilAvatar.svelte
+++ b/src/components/council/CouncilAvatar.svelte
@@ -16,9 +16,7 @@
 	}
 </script>
 
-<div
-	class="bg-ecsess-600 relative aspect-square size-24 overflow-hidden rounded-full sm:size-24"
->
+<div class="bg-ecsess-600 relative aspect-square size-24 overflow-hidden rounded-full sm:size-24">
 	{#if src && !imageError}
 		<img
 			{src}
diff --git a/src/components/council/CouncilCard.svelte b/src/components/council/CouncilCard.svelte
index f01c089..ca2e260 100644
--- a/src/components/council/CouncilCard.svelte
+++ b/src/components/council/CouncilCard.svelte
@@ -22,8 +22,8 @@
 <div class="relative w-full max-w-full sm:contents">
 	<div
 		class="group relative flex h-full min-w-0 cursor-pointer flex-row overflow-hidden rounded-xl shadow-md transition-all duration-500 ease-out sm:grid sm:grid-rows-[auto_1fr] {featured
-			? 'w-full sm:max-w-64 md:max-w-[13.6rem] lg:max-w-72'
-			: 'w-full sm:max-w-64 md:max-w-[13.6rem] lg:max-w-72'} bg-ecsess-800 ring-0 ring-offset-0 ring-ecsess-500/50 ring-offset-ecsess-900 hover:ring-ecsess-300 hover:shadow-ecsess-400/50 focus-within:ring-ecsess-300 focus-within:ring-offset-ecsess-900 focus-within:ring-2 focus-within:ring-offset-2 hover:shadow-xl sm:ring-2 sm:ring-offset-2"
+			? 'w-full sm:max-w-64 md:max-w-[13.6rem] lg:max-w-[16.2rem]'
+			: 'w-full sm:max-w-64 md:max-w-[13.6rem] lg:max-w-[16.2rem]'} bg-ecsess-800 ring-ecsess-500/50 ring-offset-ecsess-900 hover:ring-ecsess-300 hover:shadow-ecsess-400/50 focus-within:ring-ecsess-300 focus-within:ring-offset-ecsess-900 ring-0 ring-offset-0 focus-within:ring-2 focus-within:ring-offset-2 hover:shadow-xl sm:ring-2 sm:ring-offset-2"
 		role="button"
 		tabindex="0"
 		onclick={onViewProfile}
@@ -32,15 +32,15 @@
 	>
 		{#if tag}
 			<span
-				class="absolute top-2 right-2 z-10 rounded-md px-2 py-1 text-xs font-semibold uppercase tracking-wide shadow-md ring-1 bg-ecsess-600 text-ecsess-50 ring-ecsess-400/60"
+				class="bg-ecsess-600 text-ecsess-50 ring-ecsess-400/60 absolute top-2 right-2 z-10 rounded-md px-2 py-1 text-xs font-semibold tracking-wide uppercase shadow-md ring-1"
 			>
 				{tag}
 			</span>
 		{/if}
 
-		<!-- Picture section: fills entire area, image covers it -->
+		<!-- Picture section: on small screen 33vw uniform square; on sm+ fills card width -->
 		<div
-			class="relative flex min-w-20 shrink-0 items-center justify-center overflow-hidden rounded-l-xl bg-ecsess-700 aspect-square sm:min-w-0 sm:w-full sm:rounded-none"
+			class="bg-ecsess-700 relative flex aspect-square w-1/3 max-w-1/3 items-center justify-center overflow-hidden rounded-l-xl sm:w-full sm:max-w-none sm:min-w-0 sm:rounded-none"
 		>
 			{#if image && !imageError}
 				<img
@@ -59,13 +59,13 @@
 		<div
 			class="flex min-w-0 flex-1 flex-col justify-center gap-1 px-3 py-2 text-left sm:items-center sm:justify-center sm:gap-2 sm:px-3 sm:py-4 sm:text-center"
 		>
-			<h3 class="w-full text-lg font-bold leading-tight text-ecsess-50 line-clamp-2 sm:text-lg">
+			<h3 class="text-ecsess-50 line-clamp-2 w-full text-lg leading-tight font-bold sm:text-lg">
 				{name}
 			</h3>
-			<p class="w-full text-xs italic text-ecsess-200 line-clamp-2 sm:text-sm">{position}</p>
+			<p class="text-ecsess-200 line-clamp-2 w-full text-xs italic sm:text-sm">{position}</p>
 			<button
 				type="button"
-				class="mt-1 hidden w-full rounded-lg bg-ecsess-500 px-3 py-2 text-xs font-semibold text-ecsess-950 shadow-md transition focus:ring-2 focus:ring-ecsess-300 focus:ring-offset-2 focus:ring-offset-ecsess-800 focus:outline-none hover:bg-ecsess-400 hover:text-ecsess-50 sm:mt-1 sm:block lg:hidden"
+				class="bg-ecsess-500 text-ecsess-950 focus:ring-ecsess-300 focus:ring-offset-ecsess-800 hover:bg-ecsess-400 hover:text-ecsess-50 mt-1 hidden w-full rounded-lg px-3 py-2 text-xs font-semibold shadow-md transition focus:ring-2 focus:ring-offset-2 focus:outline-none sm:mt-1 sm:block lg:hidden"
 			>
 				View profile
 			</button>
@@ -74,7 +74,7 @@
 
 	<!-- Small screen only: pulsing ring (opacity only), not the card -->
 	<div
-		class="absolute inset-0 pointer-events-none rounded-xl ring-2 ring-ecsess-400/60 ring-offset-2 ring-offset-ecsess-900 animate-pulse-ring sm:hidden"
+		class="ring-ecsess-400 ring-offset-ecsess-900 animate-pulse-ring pointer-events-none absolute inset-0 rounded-xl ring-2 ring-offset-2 sm:hidden"
 		aria-hidden="true"
 	></div>
 </div>
diff --git a/src/components/council/CouncilCardPopUp.svelte b/src/components/council/CouncilCardPopUp.svelte
index c721e81..6fcff5f 100644
--- a/src/components/council/CouncilCardPopUp.svelte
+++ b/src/components/council/CouncilCardPopUp.svelte
@@ -14,7 +14,10 @@
 	function getInitials(name: string | null | undefined): string {
 		if (name == null || typeof name !== 'string') return '';
 		const words = name.trim().split(/\s+/).filter(Boolean);
-		return words.slice(0, 3).map((w) => w.charAt(0).toUpperCase()).join('');
+		return words
+			.slice(0, 3)
+			.map((w) => w.charAt(0).toUpperCase())
+			.join('');
 	}
 	import { scale } from 'svelte/transition';
 
diff --git a/src/routes/council/+page.svelte b/src/routes/council/+page.svelte
index 5b42263..9ee4159 100644
--- a/src/routes/council/+page.svelte
+++ b/src/routes/council/+page.svelte
@@ -100,12 +100,10 @@
 
 		<!-- President -->
 		{#if president}
-			<section class="mb-12 w-full">
+			<section class="mb-16 w-full">
 				<div class="flex w-full items-center gap-4">
 					<div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>
-					<h2 class="text-ecsess-100 shrink-0 text-xl font-semibold tracking-wider uppercase">
-						President
-					</h2>
+					<h2 class="text-ecsess-100 text-xl font-semibold tracking-wider uppercase">President</h2>
 					<div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>
 				</div>
 				<div class="mt-4 flex justify-center">
@@ -121,10 +119,10 @@
 		{/if}
 
 		<!-- Vice Presidents -->
-		<section class="mb-20 w-full">
+		<section class="mb-16 w-full">
 			<div class="flex w-full items-center gap-4">
 				<div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>
-				<h2 class="text-ecsess-100 shrink-0 text-2xl font-semibold tracking-wider uppercase">
+				<h2 class="text-ecsess-100 text-2xl font-semibold tracking-wider uppercase">
 					Vice Presidents
 				</h2>
 				<div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>
@@ -142,10 +140,10 @@
 		</section>
 
 		<!-- Year Representatives -->
-		<section class="mb-20 w-full">
+		<section class="mb-16 w-full">
 			<div class="flex w-full items-center gap-4">
 				<div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>
-				<h2 class="text-ecsess-100 shrink-0 text-2xl font-semibold tracking-wider uppercase">
+				<h2 class="text-ecsess-100 text-2xl font-semibold tracking-wider uppercase">
 					Year Representatives
 				</h2>
 				<div class="bg-ecsess-300 h-0.5 flex-1" aria-hidden="true"></div>