Merge pull request #12031 from ethereum/search-modal

fix: search modal scroll position and overlay

Author: pettinarip

src/components/Search/SearchModal.tsx

@@ -9,9 +9,10 @@ type ModalPropsNoScroll = Omit<DocSearchModalProps, "initialScrollY">
 const DocSearchModalWithChakra = chakra(
   (props: ModalPropsNoScroll & { className?: string }) => {
     const { className, ...docModalProps } = props
+    const windowScrollY = typeof window === "undefined" ? 0 : window.scrollY
     return (
       <div className={className}>
-        <DocSearchModal initialScrollY={0} {...docModalProps} />
+        <DocSearchModal initialScrollY={windowScrollY} {...docModalProps} />
       </div>
     )
   }

src/components/Search/utils.ts

@@ -74,6 +74,11 @@ export const getSearchModalStyles = (): SystemStyleObject => ({
   "--docsearch-modal-width": "650px",
   "--docsearch-hit-height": "fit-content",
 
+  ".DocSearch.DocSearch-Container": {
+    position: "fixed",
+    inset: 0,
+  },
+
   ".DocSearch-SearchBar": {
     p: { base: 4, md: 8 },
     pb: 4,
@@ -103,10 +108,9 @@ export const getSearchModalStyles = (): SystemStyleObject => ({
     },
   },
 
-  ".DocSearch-Container--Stalled .DocSearch-MagnifierLabel, .DocSearch-Container--Stalled .DocSearch-LoadingIndicator":
-    {
-      color: "primary.highContrast",
-    },
+  ".DocSearch-Container--Stalled .DocSearch-MagnifierLabel, .DocSearch-Container--Stalled .DocSearch-LoadingIndicator": {
+    color: "primary.highContrast",
+  },
 
   ".DocSearch-Dropdown": {
     ps: { base: 4, md: 8 },