Reduce the height of wrapped navbar

Navbar items have been forced the header height. This means if they get wrapped because the window is not wide enough, the navbar will double its height. This costs a lot of vertical space, which is particularly annoying as screens with limited width typically also have limited height.

This PR changes the behavior to not force the height. Additionally we set a small vertical margin so that it is ensured that items have a bit of space around them. This approach does not change the visible appearance of the navbar if everything fits in one line. But it reduces the vertical size of the navbar for wrapped content.

Author: timhoffm

src/pydata_sphinx_theme/assets/styles/sections/_header.scss

@@ -34,8 +34,8 @@
 
   // These items will define the height of the header
   .navbar-item {
-    height: var(--pst-header-height);
     max-height: var(--pst-header-height);
+    margin: 4px 0;
     display: flex;
     align-items: center;
   }