Main navbar is broken in certain viewport widths
Summary
On certain viewport widths, the content of the navbar goes beyond the available width, cutting the User dropdown in the far right.
Steps to reproduce
- Sign in
- Resize your browser window from 1200px wide down to 320px.
- At several widths, some content disappears and becomes inaccessible by pointer/mouse.
What is the current bug behavior?
- The current breakpoints that show/hide content are not accurate and make content become inaccessible.
What is the expected correct behavior?
- As soon as content starts to fill all available space, a breakpoint should move items into dropdowns so that no clash happens.
Relevant logs and/or screenshots
Kapture_2018-07-27_at_17.36.33
Output of checks
This bug happens on GitLab.com
Possible fixes
Definitely think the breakpoints need to be specific to the navbar content and not rely on Bootstrap4's breakpoints.
Ideally, this shift of content needs to be conservative. Could potentially be dynamic, but using JS to calculate layout might not be performant enough for such an omnipresent component (almost all signed in pages).
Some additional info:
- There are incoming issues that will affect the amount of content, so content amount is variable (if you're admin, etc.) so don't assume any fixed widths.