From b768d4d9d2b02797275a7a28a7b01683d8e3d3cf Mon Sep 17 00:00:00 2001
From: ihor-romaniuk <ihor.romaniuk@raccoongang.com>
Date: Wed, 25 Oct 2023 11:12:23 +0300
Subject: [PATCH] fix: sequence container width and responsive for sequence
 navigation block

---
 src/courseware/course/sequence/Sequence.jsx   | 42 ++++++++++---------
 .../SequenceNavigation.jsx                    |  2 +-
 .../course/sidebar/SidebarTriggers.jsx        |  6 ++-
 .../course/sidebar/common/TriggerBase.jsx     |  2 +-
 .../tabs/useIndexOfLastVisibleChild.js        |  1 +
 src/index.scss                                | 20 ++++++++-
 6 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index faa58c90c4..d2b1492fed 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -144,27 +144,29 @@ const Sequence = ({
   };
 
   const defaultContent = (
-    <div className="sequence-container d-inline-flex flex-row">
+    <div className="sequence-container d-inline-flex flex-row w-100">
       <div className={classNames('sequence w-100', { 'position-relative': shouldDisplayNotificationTriggerInSequence })}>
-        <SequenceNavigation
-          sequenceId={sequenceId}
-          unitId={unitId}
-          className="mb-4"
-          nextSequenceHandler={() => {
-            logEvent('edx.ui.lms.sequence.next_selected', 'top');
-            handleNext();
-          }}
-          onNavigate={(destinationUnitId) => {
-            logEvent('edx.ui.lms.sequence.tab_selected', 'top', destinationUnitId);
-            handleNavigate(destinationUnitId);
-          }}
-          previousSequenceHandler={() => {
-            logEvent('edx.ui.lms.sequence.previous_selected', 'top');
-            handlePrevious();
-          }}
-          goToCourseExitPage={() => goToCourseExitPage()}
-        />
-        {shouldDisplayNotificationTriggerInSequence && <SidebarTriggers />}
+        <div className="sequence-navigation-container">
+          <SequenceNavigation
+            sequenceId={sequenceId}
+            unitId={unitId}
+            className="mb-4"
+            nextSequenceHandler={() => {
+              logEvent('edx.ui.lms.sequence.next_selected', 'top');
+              handleNext();
+            }}
+            onNavigate={(destinationUnitId) => {
+              logEvent('edx.ui.lms.sequence.tab_selected', 'top', destinationUnitId);
+              handleNavigate(destinationUnitId);
+            }}
+            previousSequenceHandler={() => {
+              logEvent('edx.ui.lms.sequence.previous_selected', 'top');
+              handlePrevious();
+            }}
+            goToCourseExitPage={() => goToCourseExitPage()}
+          />
+          {shouldDisplayNotificationTriggerInSequence && <SidebarTriggers />}
+        </div>
 
         <div className="unit-container flex-grow-1">
           <SequenceContent
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
index 76bbaf3ff6..e6d5729d0d 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -80,7 +80,7 @@ const SequenceNavigation = ({
   const prevArrow = isRtl(getLocale()) ? ChevronRight : ChevronLeft;
 
   return sequenceStatus === LOADED && (
-    <nav id="courseware-sequenceNavigation" className={classNames('sequence-navigation', className)} style={{ width: shouldDisplayNotificationTriggerInSequence ? '90%' : null }}>
+    <nav id="courseware-sequenceNavigation" className={classNames('sequence-navigation', className, { 'mr-2': shouldDisplayNotificationTriggerInSequence })}>
       <Button variant="link" className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit} iconBefore={prevArrow}>
         {shouldDisplayNotificationTriggerInSequence ? null : intl.formatMessage(messages.previousButton)}
       </Button>
diff --git a/src/courseware/course/sidebar/SidebarTriggers.jsx b/src/courseware/course/sidebar/SidebarTriggers.jsx
index 9ef7b724bb..cdc255d52d 100644
--- a/src/courseware/course/sidebar/SidebarTriggers.jsx
+++ b/src/courseware/course/sidebar/SidebarTriggers.jsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import React, { useContext } from 'react';
+import { breakpoints, useWindowSize } from '@edx/paragon';
 import SidebarContext from './SidebarContext';
 import { SIDEBAR_ORDER, SIDEBARS } from './sidebars';
 
@@ -8,6 +9,9 @@ const SidebarTriggers = () => {
     toggleSidebar,
     currentSidebar,
   } = useContext(SidebarContext);
+
+  const isMobileView = useWindowSize().width < breakpoints.small.minWidth;
+
   return (
     <div className="d-flex ml-auto">
       {SIDEBAR_ORDER.map((sidebarId) => {
@@ -15,7 +19,7 @@ const SidebarTriggers = () => {
         const isActive = sidebarId === currentSidebar;
         return (
           <div
-            className={classNames('mt-3', { 'border-primary-700': isActive })}
+            className={classNames({ 'mt-3': !isMobileView, 'border-primary-700': isActive })}
             style={{ borderBottom: isActive ? '2px solid' : null }}
             key={sidebarId}
           >
diff --git a/src/courseware/course/sidebar/common/TriggerBase.jsx b/src/courseware/course/sidebar/common/TriggerBase.jsx
index 16c2845041..5800fb55c8 100644
--- a/src/courseware/course/sidebar/common/TriggerBase.jsx
+++ b/src/courseware/course/sidebar/common/TriggerBase.jsx
@@ -8,7 +8,7 @@ const SidebarTriggerBase = ({
   children,
 }) => (
   <button
-    className="border border-light-400 bg-transparent align-items-center align-content-center d-flex"
+    className="border border-light-400 bg-transparent align-items-center align-content-center d-flex notification-btn"
     type="button"
     onClick={onClick}
     aria-label={ariaLabel}
diff --git a/src/generic/tabs/useIndexOfLastVisibleChild.js b/src/generic/tabs/useIndexOfLastVisibleChild.js
index f538e12950..1749b6cff0 100644
--- a/src/generic/tabs/useIndexOfLastVisibleChild.js
+++ b/src/generic/tabs/useIndexOfLastVisibleChild.js
@@ -6,6 +6,7 @@ const invisibleStyle = {
   left: 0,
   pointerEvents: 'none',
   visibility: 'hidden',
+  maxWidth: '100%',
 };
 
 /**
diff --git a/src/index.scss b/src/index.scss
index b91dfa05f0..148bb77b0d 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -86,7 +86,6 @@
   // On mobile, the unit container will be responsible
   // for container padding.
   @media (min-width: map-get($grid-breakpoints, "sm")) {
-    width: 100%;
     margin-right: auto;
     margin-left: auto;
   }
@@ -99,8 +98,24 @@
   }
 }
 
+.sequence-navigation-container {
+  display: flex;
+  align-items: flex-start;
+}
+
+.notification-btn {
+  @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+    height: 3rem;
+  }
+}
+
 .sequence-navigation {
   display: flex;
+  flex-grow: 1;
+
+  @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+    max-width: 100%;
+  }
 
   @media (min-width: map-get($grid-breakpoints, "sm")) {
     margin: -1px -1px 0;
@@ -168,9 +183,10 @@
   }
 
   .sequence-navigation-tabs {
+    overflow: auto;
     .btn {
       flex-basis: 100%;
-      min-width: 2rem;
+      min-width: 3rem;
     }
   }