From e0e2c05e9d97f5a9078dce744f20ac187bbcc656 Mon Sep 17 00:00:00 2001
From: Caden Lee <maltyg3332@gmail.com>
Date: Sat, 11 Jan 2025 15:15:44 -0800
Subject: [PATCH] fix: popover position on mobile

---
 site/src/App.scss                     | 9 +++++++++
 site/src/pages/RoadmapPage/Course.tsx | 6 ++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/site/src/App.scss b/site/src/App.scss
index 1401eb8e..25640513 100644
--- a/site/src/App.scss
+++ b/site/src/App.scss
@@ -91,6 +91,15 @@ button {
   }
 }
 
+.ppc-popover.open-bottom {
+  margin-top: 40px;
+  .arrow::after,
+  .arrow::before {
+    top: -12px;
+    left: 7px;
+  }
+}
+
 .ppc-modal {
   font-size: 18px;
 
diff --git a/site/src/pages/RoadmapPage/Course.tsx b/site/src/pages/RoadmapPage/Course.tsx
index 0104ce7a..5df9d293 100644
--- a/site/src/pages/RoadmapPage/Course.tsx
+++ b/site/src/pages/RoadmapPage/Course.tsx
@@ -6,6 +6,7 @@ import CourseQuarterIndicator from '../../component/QuarterTooltip/CourseQuarter
 import CoursePopover from '../../component/CoursePopover/CoursePopover';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
+import { useIsMobile } from '../../helpers/util';
 
 import { CourseGQLData } from '../../types/types';
 import ThemeContext from '../../style/theme-context';
@@ -41,6 +42,7 @@ const Course: FC<CourseProps> = (props) => {
   } = props;
 
   const courseRoute = '/course/' + props.department.replace(/\s+/g, '') + props.courseNumber.replace(/\s+/g, '');
+  const isMobile = useIsMobile();
 
   return (
     <div className={`course ${requiredCourses ? 'invalid' : ''}`}>
@@ -54,9 +56,9 @@ const Course: FC<CourseProps> = (props) => {
           </span>
           <OverlayTrigger
             trigger={['hover', 'focus']}
-            placement={openPopoverLeft ? 'left-start' : 'right-start'}
+            placement={isMobile ? 'bottom' : openPopoverLeft ? 'left-start' : 'right-start'}
             overlay=<Popover
-              className={'ppc-popover' + (openPopoverLeft ? ' open-left' : '')}
+              className={'ppc-popover' + (isMobile ? ' open-bottom' : openPopoverLeft ? ' open-left' : '')}
               id={'course-popover-' + id}
             >
               <CoursePopover