cdeery/APER-2484/job select overflow scroll (#10)

feat: use overflow css property to enable horizontal scrolling of job selectors
edx · Jul 19, 2023 · c5144a0 · c5144a0
1 parent a2ef557
commit c5144a0
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/skills-builder/skills-builder-modal/skillsBuilderModal.scss b/src/skills-builder/skills-builder-modal/skillsBuilderModal.scss
@@ -19,6 +19,9 @@ $breakpoint-medium: 992px;
       top: 0.5rem;
     }
   }
+  .overflow-scroll-medium {
+    overflow: scroll;
+}
 }
 
 @media (min-width: $breakpoint-medium) {

diff --git a/src/skills-builder/skills-builder-modal/view-results/RelatedSkillsSelectableBoxSet.jsx b/src/skills-builder/skills-builder-modal/view-results/RelatedSkillsSelectableBoxSet.jsx
@@ -1,14 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  SelectableBox, Chip, Stack, useMediaQuery, breakpoints,
+  SelectableBox, Chip, Stack,
 } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 
 const RelatedSkillsSelectableBoxSet = ({ jobSkillsList, selectedJobTitle, onChange }) => {
   const { formatMessage } = useIntl();
-  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
 
   const renderTopFiveSkills = (skills) => {
     const topFiveSkills = skills.sort((a, b) => b.significance - a.significance).slice(0, 5);
@@ -27,7 +26,8 @@ const RelatedSkillsSelectableBoxSet = ({ jobSkillsList, selectedJobTitle, onChan
       type="radio"
       value={selectedJobTitle}
       onChange={onChange}
-      columns={isExtraSmall ? 1 : 3}
+      columns={3}
+      className="overflow-scroll-medium"
     >
       {jobSkillsList.map(job => (
         <SelectableBox