fix: help modal mobile layout

compsci-adl · Sep 29, 2024 · 24c2e0b · 24c2e0b
1 parent e444119
commit 24c2e0b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
@@ -123,7 +123,7 @@ const CalendarHeader = ({
 	];
 	return (
 		<div className="sticky top-0 z-50 flex items-center justify-between bg-white py-1">
-			<h2 className="text-3xl">
+			<h2 className="text-3xl mobile:text-2xl">
 				<span className="mr-2 font-bold">
 					{/* Month for Wednesday in the week is more accurate than Monday */}
 					{

diff --git a/src/components/HelpModal.tsx b/src/components/HelpModal.tsx
@@ -133,16 +133,16 @@ export const HelpModal = () => {
 								animate="center"
 								exit="exit"
 								transition={{ ease: 'easeInOut', duration: 0.3 }}
-								className="absolute h-full w-full p-4"
+								className="absolute h-full w-full p-4 mobile:p-1"
 							>
-								<Card className="h-full p-2">
-									<CardBody>
-										<p className="text-lg">{step.content}</p>
-										<div className="flex h-full flex-col justify-center">
+								<Card className="h-full p-2 mobile:p-1">
+									<CardBody className="gap-2">
+										<div className="text-lg mobile:text-sm">{step.content}</div>
+										<div className="flex grow items-center justify-center">
 											<img
 												alt={step.image.alt}
 												src={step.image.path}
-												className="max-h-[28rem] object-contain"
+												className="max-h-[28rem]"
 											/>
 										</div>
 									</CardBody>