Navbar in docs gets scrambled at a certain window width

[joelostblom]

What happened?

This is low prio, but the docs navbar get a bit scrambled in "medium" screen width. It looks fine in wide screen:

And narrow:

But there is an in-between for a few pixel that looks wonky, particularly for all the icons to the right:

What would you like to happen instead?

I think we should snap to narrow earlier to avoid the scrambled appearance.

Which version of Altair are you using?

No response

[binste]

I didn't find any theme variable in https://pydata-sphinx-theme.readthedocs.io/en/stable/user_guide/styling.html which we could use to do this. Maybe we'd need to adjust the lg bootstrap breakpoint? But I didn't manage to do this and not sure what side effects it has...

As an alternative, we could "header_links_before_dropdown" from 6 to 4 in conf.py so that the top bar looks like this:

it solves the scrambled icons and makes it in general less crowded which is nice too. What do you think?

[joelostblom]

I like it! We could probably set a breakpoint in the CSS for screen sizes as you mentioned, but I prefer your solution with the dropdown to make the bar less crowded on all screen sizes.