BUG - center search dialog on wide screens (#2085)

I noticed while reading the docs that on very wide screens, the search
dialog was off center.

This PR gets rid of all unnecessary CSS that was left over from when the
search dialog was implemented without the built-in benefits of the HTML
modal dialog element.

### How to test

1. Go to the preview docs build for this PR.
2. Make your screen really wide > 2000px.
3. Click on the search button in the header nav.
4. The search dialog should be centered now.
5. For good measure, type something in the search bar and hit enter.

---------

Co-authored-by: Daniel McCloy <[email protected]>

Author: gabalafou

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;
     }
   }
 }