fix: improve search modal performance and styling

- Remove expensive blur filter that delayed modal rendering
- Hide noise background when search modal is active
- Fix search bar layout by replacing broken grid with flexbox
- Hide search placeholder text visually (sr-only)
- Center magnifier icon vertically

Author: justin-schroeder

docs/assets/css/docsearch.css

@@ -16,20 +16,16 @@ input[type="search"]::-webkit-search-results-decoration {
 }
 
 body.DocSearch--active::before {
+  display: none;
+}
+body.DocSearch--active::after {
   z-index: 99;
   content: "";
   position: fixed;
-  top: -10px;
-  left: -10px;
-  right: -10px;
-  bottom: -10px;
+  inset: 0;
   background-color: rgba(0, 0, 0, 0.5);
 }
 
-body.DocSearch--active > *:not(.DocSearch-Container) {
-  filter: blur(5px);
-}
-
 .DocSearch-NoResults {
   display: flex;
   flex-wrap: wrap;
@@ -74,6 +70,9 @@ button.DocSearch-Button {
   @apply flex flex-grow gap-2 text-slate-400 items-center;
   @apply dark:text-purple-500;
 }
+.DocSearch-Button-Placeholder {
+  @apply sr-only;
+}
 .DocSearch-Button-Keys {
   @apply text-sm px-2 text-slate-400 border rounded space-x-1;
   @apply dark:text-purple-400 dark:border-purple-500;
@@ -144,6 +143,12 @@ button.DocSearch-Button {
   padding: 0.75em 1em;
   border-radius: 0.5em;
 }
+.DocSearch-MagnifierLabel {
+  @apply text-[0px] flex items-center;
+}
+.DocSearch-MagnifierLabel svg {
+  @apply w-5 h-5;
+}
 
 .DocSearch-SearchBar form input {
   appearance: none;

docs/assets/css/main.css

@@ -49,11 +49,15 @@ html.dark body::before {
 }
 
 .DocSearch-SearchBar {
-  @apply grid grid-cols-[minmax(0,1fr)_auto];
+  @apply flex items-center;
 }
 
 .DocSearch-SearchBar form {
-  @apply grid grid-cols-[auto_0_minmax(0,1fr)_auto];
+  @apply flex flex-1 items-center gap-2;
+}
+
+.DocSearch-SearchBar form input {
+  @apply flex-1;
 }
 
 .monaco-editor,