UX Bug: Unnecessary horizontal scrolling introduced by context-header class

Summary

Static width property set in pixels on .context-header introduces unnecessary horizontal scrolling within the navigational sidebar when vertical overflow introduces a scrollbar.

Steps to reproduce

View a repo whose navigational sidebar has vertical overflow

Example Project

Example

What is the current bug behavior?

.context-header {
    position: relative;
    margin-right: 2px;
    width: 220px;
}

What is the expected correct behavior?

.context-header {
    position: relative;
    margin-right: 2px;
    width: 100%;
}

The grandparent .nav-sidebar DOM node has a static pixel width set, so introducing another static declaration of equal or larger pixel value inside of it will introduce horizontal scrolling where a vertical scrollbar is present.

Relevant logs and/or screenshots

Screen_Shot_2019-08-16_at_11.03.48_PM vs. Screen_Shot_2019-08-16_at_11.04.09_PM

Output of checks

This bug happens on GitLab.com

Possible fixes

I think this SCSS variable is the culprit. Replacing it with 100% should fix it.

Assignee Loading
Time tracking Loading