diff --git a/apps/site/src/app/schedule/Assets/Circle.tsx b/apps/site/src/app/schedule/Assets/Circle.tsx index 91aa46fc..9432a3fa 100644 --- a/apps/site/src/app/schedule/Assets/Circle.tsx +++ b/apps/site/src/app/schedule/Assets/Circle.tsx @@ -55,7 +55,7 @@ const EventCircle: React.FC = ({ } > )} -
+
{title}

{location}

{convertTime(startTime, endTime)}

diff --git a/apps/site/src/app/schedule/DayTwo/DayTwo.tsx b/apps/site/src/app/schedule/DayTwo/DayTwo.tsx index 6d4d5481..c72f2cdc 100644 --- a/apps/site/src/app/schedule/DayTwo/DayTwo.tsx +++ b/apps/site/src/app/schedule/DayTwo/DayTwo.tsx @@ -8,6 +8,7 @@ import MobilePath from "@/assets/images/map2/map_2_path_mobile.png"; import styles from "./DayTwo.module.scss"; import Image from "next/image"; import EventCircle from "../Assets/Circle"; +import useWindowWidth from "@/lib/useWindowWidth"; interface DayTwoProps { schedule: Array; @@ -15,21 +16,39 @@ interface DayTwoProps { } const DayTwo: React.FC = ({ schedule, time }) => { - const positions = [ - { top: "-0.5%", left: "16%" }, - { top: "1.5%", left: "60%" }, - { top: "13.5%", left: "65%" }, - { top: "24%", left: "55%" }, - { top: "28.5%", left: "32%" }, - { top: "43%", left: "23%" }, - { top: "44.8%", left: "60%" }, - { top: "59.5%", left: "38%" }, - { top: "70%", left: "30%" }, - { top: "80.5%", left: "70%" }, - { top: "82.5%", left: "20%" }, - { top: "95%", left: "50%" }, - { top: "99%", left: "92%" }, - ]; + const windowWidth = useWindowWidth(); + const positions = + windowWidth > 768 + ? [ + { top: "-0.5%", left: "16%" }, + { top: "1.5%", left: "60%" }, + { top: "13.5%", left: "65%" }, + { top: "24%", left: "55%" }, + { top: "28.5%", left: "32%" }, + { top: "43%", left: "23%" }, + { top: "44.8%", left: "60%" }, + { top: "59.5%", left: "38%" }, + { top: "70%", left: "30%" }, + { top: "80.5%", left: "70%" }, + { top: "82.5%", left: "20%" }, + { top: "95%", left: "50%" }, + { top: "99%", left: "92%" }, + ] + : [ + { top: "-0.5%", left: "16%" }, + { top: "-0.4%", left: "70%" }, + { top: "13.5%", left: "65%" }, + { top: "20%", left: "18%" }, + { top: "28%", left: "32%" }, + { top: "43%", left: "23%" }, + { top: "50%", left: "74%" }, + { top: "59%", left: "38%" }, + { top: "71%", left: "30%" }, + { top: "80.5%", left: "70%" }, + { top: "82.5%", left: "20%" }, + { top: "94%", left: "10%" }, + { top: "98.5%", left: windowWidth < 576 ? "82%" : "90%" }, + ]; return ( <>