Only show sequence list horizontal scrollbar when the width of the screen is xs
Description
<!--
Please give the pull request a short but descriptive title.
Use [conventional commits](https://www.conventionalcommits.org/) to separate and summarize commits logically.
Use this template as a guide. Omit sections that don't apply. You may link to information rather than copy it.
More details about the template are at https://github.com/edx/open-edx-proposals/pull/180
(link will be updated when that document merges)
-->
Â
Description
When you make the screen of open edX smaller, at some point a horizontal scroll bar appears in the "sequence list". This horizontal scrollbar is unneccesary and moreover, it hides the highlight of the current unit.
The problem occurs in Firefox as well as Chromium on desktop PCs. Note: It does not occur when you enter "responsive design mode" in Firefox.
Here's a screenshot where all is well:

Here's a screenshot where the horizontal scrollbar appears too early:

Here's a screenshot of a situation in which the horizontal scrollbar is necessary:

As you can see, in the last screenshot, the highlight switched to a background color change instead of a line under the element. This MR only introduces the horizontal scrolling to the screen size where the highlight is changed.
Here's a screenshot where I use the same width as the problematic screenshot above (no. 2), but with this MR applied:

Â
Supporting information
I initially raised this issue in the `indigo` theme repository: https://github.com/overhangio/indigo/issues/10
The screenshots are made with my own theme on Juniper, but that theme does not override any of the relevant variables. As you can see in the Indigo issue, the problem occurs there as well. For completeness, this is my theme repository: https://code.greenhost.net/totem/indigo-totem/
Â
Testing instructions
To reproduce the issue:
1. Open any course in the LMS environment. The bug occurs at least on Chromium and Firefox, on PC (tested with Firefox 85.0 on Ubuntu 20.04)
2. Go to a page that has several units
3. Reduce the width of the screen until you see a horizontal scrollbar
To confirm this MR fixes the issue, repeat steps 1 to 3 on a platform with this MR applied.
Â
Deadline
None
Assignee
Reporter
Labels
Contributor Name
Repo
Customer
Epic Link
OSCM Assignee
Platform Map Area (Levels 1 & 2)
Platform Map Area (Levels 3 & 4)
Blended Hour Utilization Percentage
edX Theme
edX Squad
Github Lines Added
Github Lines Deleted
Priority
