Rework the error page and OH schedule

src/components/officehour/OHBlock.svelte

@@ -9,14 +9,14 @@
 </script>
 
 <div
-	class="bg-ecsess-100 text-ecsess-900 hover:bg-ecsess-200 border-ecsess-300 grid h-full place-content-center rounded-md border text-center shadow-md transition-all hover:shadow-lg"
+	class="bg-ecsess-100 text-ecsess-900 hover:bg-ecsess-200 grid h-full place-content-center rounded-md border-transparent text-center shadow-md transition-all hover:shadow-lg"
 >
-	<p class="text-base font-extrabold lg:text-lg">
+	<p class="text-base leading-tight font-semibold">
 		{officeHour.member.name.split(' ')[0]}
 	</p>
 
 	{#if !isShortBlock}
-		<p class="text-ecsess-700 text-xs italic">
+		<p class="text-ecsess-700 mt-0.5 text-[11px] leading-tight opacity-90">
 			{shortenPosition(officeHour.member.position)}
 		</p>
 	{/if}

src/components/officehour/OHSchedule.svelte

@@ -114,10 +114,14 @@
 </script>
 
 <div class="overflow-x-auto">
-	<div class="mx-auto max-w-7xl min-w-[800px]">
+	<div class="border-ecsess-500 bg-ecsess-900 mx-auto max-w-7xl min-w-[800px] border-t pt-2">
 		<!-- Header row -->
 		<div class="mb-2 grid gap-0" style:grid-template-columns="80px repeat(5, 1fr)">
-			<div class="text-ecsess-50 px-2 text-center text-base font-semibold">Time</div>
+			<div
+				class="text-ecsess-50 bg-ecsess-900 sticky left-0 z-20 px-2 text-center text-base font-semibold"
+			>
+				Time
+			</div>
 			{#each DAYS as day}
 				<div class="text-ecsess-50 px-2 text-center text-base font-semibold md:text-lg">
 					{day}
@@ -135,7 +139,9 @@
 
 				<!-- Time column (only for first day) -->
 				{#if dayIndex === 0}
-					<div class="border-ecsess-500 relative border-b-2">
+					<div
+						class="border-ecsess-500 bg-ecsess-900 sticky left-0 z-20 border-b-2"
+					>
 						{#each timeSlots as timeSlot}
 							{@const isHourMark = timeSlot % 60 === 0}
 							<div