diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.jsx index 6e1e84d6c5..009c03d6c0 100644 --- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.jsx +++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.jsx @@ -1,9 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; +import classNames from 'classnames'; import UnitButton from './UnitButton'; import SequenceNavigationDropdown from './SequenceNavigationDropdown'; import useIndexOfLastVisibleChild from '../../../../generic/tabs/useIndexOfLastVisibleChild'; +import { useIsOnXLDesktop } from './hooks'; const SequenceNavigationTabs = ({ unitIds, unitId, showCompletion, onNavigate, @@ -13,11 +15,17 @@ const SequenceNavigationTabs = ({ containerRef, invisibleStyle, ] = useIndexOfLastVisibleChild(); + const isOnXLDesktop = useIsOnXLDesktop(); const shouldDisplayDropdown = indexOfLastVisibleChild === -1; return ( <div style={{ flexBasis: '100%', minWidth: 0 }}> - <div className="sequence-navigation-tabs-container" ref={containerRef}> + <div + ref={containerRef} + className={classNames('sequence-navigation-tabs-container', { + 'navigation-tab-width': isOnXLDesktop && shouldDisplayDropdown, + })} + > <div className="sequence-navigation-tabs d-flex flex-grow-1" style={shouldDisplayDropdown ? invisibleStyle : null} diff --git a/src/courseware/course/sequence/sequence-navigation/hooks.js b/src/courseware/course/sequence/sequence-navigation/hooks.js index 20c4e6bb2d..aea17dbc11 100644 --- a/src/courseware/course/sequence/sequence-navigation/hooks.js +++ b/src/courseware/course/sequence/sequence-navigation/hooks.js @@ -1,6 +1,7 @@ /* eslint-disable import/prefer-default-export */ import { useSelector } from 'react-redux'; +import { breakpoints, useWindowSize } from '@openedx/paragon'; import { useModel } from '../../../../generic/model-store'; import { sequenceIdsSelector } from '../../../data'; @@ -68,3 +69,8 @@ export function useSequenceNavigationMetadata(currentSequenceId, currentUnitId) navigationDisabledPrevSequence, }; } + +export function useIsOnXLDesktop() { + const windowSize = useWindowSize(); + return windowSize.width >= breakpoints.extraLarge.minWidth; +} diff --git a/src/index.scss b/src/index.scss index 9e891b2b34..bc98a642e6 100755 --- a/src/index.scss +++ b/src/index.scss @@ -173,6 +173,10 @@ } } + .navigation-tab-width { + max-width: 30rem; + } + .sequence-navigation-dropdown { .dropdown-menu .btn { flex-basis: 100%;