fix: popover position on mobile

icssc · Jan 11, 2025 · e0e2c05 · e0e2c05
1 parent de9fa61
commit e0e2c05
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git 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
@@ -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