fix: fixed units overflow issue (openedx#1343)

* fix: fixed units overflow issue

* refactor: refactor code for desktop and xl screen

* refactor: fixed refactor issue

Author: sundasnoreen12

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}

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;
+}

src/index.scss

@@ -173,6 +173,10 @@
     }
   }
 
+  .navigation-tab-width {
+    max-width: 30rem;
+  }
+
   .sequence-navigation-dropdown {
     .dropdown-menu .btn {
       flex-basis: 100%;