From 9423a889ba38a613a31bcfc4fd200fd8f83f9275 Mon Sep 17 00:00:00 2001
From: sundasnoreen12 <72802712+sundasnoreen12@users.noreply.github.com>
Date: Fri, 5 Apr 2024 01:33:07 +0500
Subject: [PATCH] fix: fixed units overflow issue (#1343)

* fix: fixed units overflow issue

* refactor: refactor code for desktop and xl screen

* refactor: fixed refactor issue
---
 .../sequence-navigation/SequenceNavigationTabs.jsx     | 10 +++++++++-
 .../course/sequence/sequence-navigation/hooks.js       |  6 ++++++
 src/index.scss                                         |  4 ++++
 3 files changed, 19 insertions(+), 1 deletion(-)

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%;