Schedule: Fix course numbers appearing outside the bounds of the block

[jonseitz]

On the Spring 2020 view of the Schedule, some prefix blocks are not large enough to contain all the course numbers. Should we change the font size, or implement some other fix here?

Vittorio to provide a mockup.

[Vittorio2015]

Wrapping course prefix

Current "Schedule", Sprint 2020, Monday, 12 pm:

Adding overflow-wrap: normal; to h4

h4 {
    overflow-wrap: normal;
}

[Vittorio2015]

Prefix block overflow

Current "Schedule", Sprint 2020, Tuesday, 10:30 am:

Adding overflow: scroll; to course prefix div class

div.sc-bQdRvg {
    overflow: scroll;
}

Structure of course prefix div

<div prefix="CS" class="sc-bQdRvg lToYU">
    <h4 class="sc-fXoxaI iIhzBf">CS</h4>
    <ul class="sc-FyeoB laNHN">
        <li class="sc-hzMMVR cHTNsT"></li>
        <li class="sc-hzMMVR cHTNsT"></li>
        <li class="sc-hzMMVR cHTNsT"></li>
        <li class="sc-hzMMVR cHTNsT"></li>
        <li class="sc-hzMMVR cHTNsT"></li>
        <li class="sc-hzMMVR cHTNsT"></li>
    </ul>
</div>

Persistent course prefix

1. Adding absolute positioning and background color to prefix heading

position: absolute; background-color: rgb(103, 151, 219); /* CS specific background color */

2. Adding top margin to the scrolling ul list of courses to compensate for the vertical space occupied by the prefix (i.e.: CS)

margin-top: 2em;

Result

Recommendations

• Show persistent scroll bar only on course prefix blocks with overscroll content