fix: title and location mobile alignment (#109)

HackAtUCI · Oct 31, 2023 · 20b2f37 · 20b2f37
1 parent e66f4ad
commit 20b2f37
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.module.scss b/apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.module.scss
@@ -42,3 +42,11 @@
 .eventTitle {
 	font-size: 24px;
 }
+
+.mobileLocation {
+	text-align: left;
+
+	@include bootstrap.media-breakpoint-up(lg) {
+		text-align: right;
+	}
+}
diff --git a/apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.tsx b/apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.tsx
@@ -3,7 +3,9 @@
 import Image from "next/image";
 
 import Accordion from "react-bootstrap/Accordion";
+import Col from "react-bootstrap/Col";
 import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
 
 import clip from "@/assets/images/clip.svg";
 
@@ -49,13 +51,20 @@ function ClipboardSchedule({ schedule }: ClipboardScheduleProps) {
 									eventKey={title}
 									className={styles.accordionItem}
 								>
-									<Accordion.Header className={styles.accordionHeader}>
-										<h3 className={styles.eventTitle}>{title}</h3>
-										{/* <span>{hosts?.join()}</span> */}
-										<span className="text-end ms-auto">
-											{location},{" "}
-											{dateTimeFormat.formatRange(startTime, endTime)}
-										</span>
+									<Accordion.Header>
+										<Row className="w-100">
+											<Col lg>
+												<h3 className={styles.eventTitle}>{title}</h3>
+											</Col>
+											{/* <span>{hosts?.join()}</span> */}
+
+											<Col lg className={styles.mobileLocation}>
+												<span>
+													{location},{" "}
+													{dateTimeFormat.formatRange(startTime, endTime)}
+												</span>
+											</Col>
+										</Row>
 									</Accordion.Header>
 									<Accordion.Body>{description}</Accordion.Body>
 								</Accordion.Item>