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)
-->

  1.  

    1. 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:

![image](https://user-images.githubusercontent.com/832723/107036830-83569680-67ba-11eb-8bd8-61b225eeb12a.png)

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

![image](https://user-images.githubusercontent.com/832723/107037003-c6b10500-67ba-11eb-9098-e61242497a30.png)

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

![image](https://user-images.githubusercontent.com/832723/107037032-d16b9a00-67ba-11eb-933c-a96448151ba9.png)

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:

![image](https://user-images.githubusercontent.com/832723/107037252-198abc80-67bb-11eb-891f-94350d3c4758.png)

  1.  

    1. 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/

  1.  

    1. 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.

  1.  

    1. Deadline

None

Done

Assignee

David Joy

Reporter

Open Source Pull Request Bot

Labels

Contributor Name

Maarten de Waard

Repo

edx/edx-platform

Customer

Epic Link

None

OSCM Assignee

None

Platform Map Area (Levels 1 &amp; 2)

None

Platform Map Area (Levels 3 &amp; 4)

None

Blended Hour Utilization Percentage

None

edX Theme

None

edX Squad

None

Github Lines Added

1

Github Lines Deleted

1

Priority

Unset