Plots2: Navbar wrapping poorly at 1046px wide

[jywarren]

Our navbar was recently reworked and it looks like there is at least one state where it wraps incorrectly: when the window is 1046px wide:

For comparison, here it is working properly:

Some of these items are hard coded, but others are within a Feature (see the data model in the README). But I believe we should be able to fix this by adjusting the breakpoints or the menu item widths!

https://github.com/publiclab/plots2/blob/master/app/views/layouts/_header.html.erb#L29-L75

We'd love some help with this, although it'll require testing at various widths!

[jywarren]

Noticing that the bad wrapping happens starting at 992px minimum width, which is a Bootstrap grid breakpoint: https://getbootstrap.com/docs/4.3/layout/grid/

[jywarren]

Aha - i think the key here is to change this line:

https://github.com/publiclab/plots2/blob/dc1aad03626201b3307acc898350a017cf1be17e/app/views/layouts/_header.html.erb#L149

To say d-lg-none instead of d-xl-none -- that'll make the triple-line menu to the far right hide, and not crowd the navbar at the lg (large) size!

---

This has been marked as a good candidate for becoming a first-timers-only issue like these, meaning that it's simple, self-contained, and with some extra formatting, could be a great entry point for a new contributor. If you're familiar enough with this code, please consider reformatting or reposting it as a first-timers-only issue, and then ping @publiclab/reviewers to get it labelled. Or, if this is not your first time, try to solve it yourself!

---

[Ngai-E]

Hello, my name is Elizabeth an Outreachy alumn. I love working with open source solutions. I am starting to build my skills in Ruby on Rails so I would love to become a contributor here. That being said, can I claim this issue?

[SidharthBansal]

Please

[Ngai-E]

Please

thanks