FIX: Search bar and navigation dropdown style

[choldgraf]

These are a few UX/UI improvements to the search bar and the navigation dropdown styling. Here are the major improvements:

• Fixes the overlap of UI items
• Makes the dropdown menu items show up as regular links on mobile (no hiding)
• Makes the header menu become scrollable if it exceeds 90% of the vertical height (in case there are many menu links)
• Cleans up our use of media-breakpoint-down because I think it wasn't behaving as expected.
  • ref: Change media-breakpoint-down implementation twbs/bootstrap#29148
  • I think this also fixes the "header popup" happening at a different breakpoint than expected
• Adds some spacing to our header so that items look better if they are stacked vertically (and reduces total height a bit so the height remains roughly the same)

todo

• Make sure that the breakpoint for "collapsing the header" and for "turning the dropdown into a list of links" is the same.

closes #769

[chrisjsewell]

Don't know if this is because of this PR, but the dropdown now disappears on "medium size" screens

[choldgraf]

Hmm I think that's because of:

https://github.com/pydata/pydata-sphinx-theme/pull/770/files#diff-56f26cf6476156a4e40851251ff7f6c361c38ad8dfb404d87e7738e52cc31721R104-R105

We should make sure that the breakpoint for "collapsing the header" and for "turning the dropdown into a list of links" is the same.

[choldgraf]

I dug a little more and realized that we were slightly mis-using the media-breakpoint-down mixin, because it actually triggers on the next highest breakpoint, rather than the one given as an argument (that is super confusing and they've change the behavior in BS5, I linked the PR where they discuss this in the top comment). I think that is now fixed

[choldgraf]

Alrighty we've got two approvals here so I'm gonna merge and we can iterate in subsequent PRs as we wish