BUG - center search dialog on wide screens

src/pydata_sphinx_theme/assets/styles/components/_search.scss

@@ -82,60 +82,45 @@
 /**
  * The search modal <dialog>
  */
-#pst-search-dialog {
-  display: none;
-
-  &[open] {
-    display: flex;
-
-    // Center in middle of screen just underneath header
-    position: fixed;
-    z-index: $zindex-modal;
-    top: 30%;
-    left: 50%;
-    transform: translate(-50%, -30%);
-    right: 1rem;
-    margin-bottom: 0;
-    margin-top: 0.5rem;
-    width: 90%;
-    max-width: 800px;
-    background-color: transparent;
-    padding: $focus-ring-width;
-    border: none;
-    flex-direction: column;
-    height: 80vh;
+#pst-search-dialog[open] {
+  margin: 15vh auto 0; // an open modal dialog has a fixed position, so these margins bring it 15% down the viewport height and center it horizontally
+  width: 90%;
+  max-width: 800px;
+  background-color: transparent;
+  padding: $focus-ring-width;
+  border: none;
+  height: 80vh;
+
+  &::backdrop {
+    background-color: black;
+    opacity: 0.5;
+  }
+
+  form.bd-search {
+    flex-grow: 0;
 
-    &::backdrop {
-      background-color: black;
-      opacity: 0.5;
+    // Font and input text a bit bigger
+    svg,
+    input {
+      font-size: var(--pst-font-size-icon);
     }
+  }
 
-    form.bd-search {
-      flex-grow: 0;
+  /* In pydata-sphinx-theme.js this container is appended below
+   * the query input node after the user types their search query.
+   * Search results are populated into this container using Sphinx's
+   * built-in, JS-powered local search tools. */
+  #search-results {
+    overflow-y: scroll;
+    background-color: var(--pst-color-background);
+    padding: 1em;
 
-      // Font and input text a bit bigger
-      svg,
-      input {
-        font-size: var(--pst-font-size-icon);
-      }
+    a {
+      color: var(--pst-color-link);
     }
 
-    /* In pydata-sphinx-theme.js this container is appended below
-     * the query input node after the user types their search query.
-     * Search results are populated into this container using Sphinx's
-     * built-in, JS-powered local search tools. */
-    #search-results {
-      overflow-y: scroll;
-      background-color: var(--pst-color-background);
-      padding: 1em;
-
-      a {
-        color: var(--pst-color-link);
-      }
-
-      &.empty {
-        display: none;
-      }
+    &.empty {
+      display: none;
     }
   }
 }