Fix header vertical spacing and jupyter-sphinx cells (#1164)

Fixes undefined

docs/examples/pydata.md

@@ -91,10 +91,22 @@ data = xr.DataArray(
 data
 ```
 
+## ipyleaflet
+
+`ipyleaflet` is a **Jupyter**/**Leaflet** bridge enabling interactive maps in the Jupyter notebook environment. this demonstrate how you can integrate maps in your documentation.
+
+```{code-cell}
+from ipyleaflet import Map, basemaps
+from IPython.display import display
+
+# display a map centered on France
+m = Map(basemap=basemaps.Esri.WorldImagery,  zoom=5, center=[46.21, 2.21])
+display(m)
+```
+
 ## jupyter-sphinx
 
-Another common library is `jupyter-sphinx`.
-This section demonstrates a subset of functionality above to make sure it behaves as expected.
+This theme has styling for [`jupyter-sphinx`](https://jupyter-sphinx.readthedocs.io/), which is often used for executing and displaying widgets with a Jupyter kernel.
 
 ```{jupyter-execute}
 import matplotlib.pyplot as plt
@@ -105,15 +117,3 @@ data = rng.standard_normal((3, 100))
 fig, ax = plt.subplots()
 ax.scatter(data[0], data[1], c=data[2], s=3)
 ```
-
-## ipyleaflet
-
-`ipyleaflet` is a **Jupyter**/**Leaflet** bridge enabling interactive maps in the Jupyter notebook environment. this demonstrate how you can integrate maps in your documentation.
-
-```{jupyter-execute}
-from ipyleaflet import Map, basemaps
-
-# display a map centered on France
-m = Map(basemap=basemaps.Esri.WorldImagery,  zoom=5, center=[46.21, 2.21])
-m
-```

src/pydata_sphinx_theme/assets/styles/extensions/_execution.scss

@@ -10,21 +10,27 @@
  * Jupyter Sphinx
  */
 
-// Dark theme special-cases
-html[data-theme="dark"] .bd-content {
-  div.jupyter_container {
-    // Background has slightly more custom background behavior because of hard-coded color
-    border: 1px solid var(--pst-color-border);
-    background-color: var(--pst-color-surface);
-    border-radius: 0.25rem;
+.bd-content div.jupyter_container {
+  // We don't want borders around the whole container, just around code cells
+  border: none;
+  background-color: unset;
+  box-shadow: none;
 
-    div.output,
-    div.highlight {
-      border-radius: 0.25rem;
-    }
+  // Code cells should have the same style as our other code objects
+  div.output,
+  div.highlight {
+    border-radius: 0.25rem;
+  }
+  div.highlight {
+    background-color: var(--pst-color-surface);
+  }
 
-    div.highlight {
-      background-color: var(--pst-color-surface);
+  // Ensure the style is the same as our code cells. Jupyter Sphinx makes it tiny.
+  .cell_input,
+  .cell_output {
+    border-radius: 0.25rem;
+    pre {
+      padding: 1rem;
     }
   }
 }

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

@@ -13,16 +13,14 @@
   background: var(--pst-color-on-background) !important;
   box-shadow: 0 0.125rem 0.25rem 0 var(--pst-color-shadow);
 
-  height: var(--pst-header-height);
-  max-height: var(--pst-header-height);
   width: 100%;
-  padding: 0.5rem 0;
+  padding: 0;
   max-width: 100vw;
   justify-content: center;
   .bd-header__inner {
     display: flex;
     align-items: center;
-    height: 100%;
+    height: fit-content;
     padding-left: 1rem;
     padding-right: 1rem;
   }
@@ -36,6 +34,16 @@
       flex-grow: 1;
       padding: 0 0 0 0.5rem;
     }
+
+    // These items will define the height of the header
+    .navbar-start-item,
+    .navbar-center-item,
+    .navbar-end-item {
+      height: var(--pst-header-height);
+      max-height: var(--pst-header-height);
+      display: flex;
+      align-items: center;
+    }
   }
 
   #navbar-end,
@@ -44,11 +52,13 @@
     display: flex;
     align-items: center;
     flex-flow: wrap;
+    // In case we wrap our items to multiple rows on small screens
+    row-gap: 0;
   }
 
   #navbar-end,
   #navbar-center {
-    gap: 1rem;
+    column-gap: 1rem;
   }
 
   // A little smaller because this is displayed by default on mobile