diff --git a/src/components/Search/SearchModal.tsx b/src/components/Search/SearchModal.tsx index b8bf2b03a82..5b4923b5913 100644 --- a/src/components/Search/SearchModal.tsx +++ b/src/components/Search/SearchModal.tsx @@ -9,9 +9,10 @@ type ModalPropsNoScroll = Omit const DocSearchModalWithChakra = chakra( (props: ModalPropsNoScroll & { className?: string }) => { const { className, ...docModalProps } = props + const windowScrollY = typeof window === "undefined" ? 0 : window.scrollY return (
- +
) } diff --git a/src/components/Search/utils.ts b/src/components/Search/utils.ts index e883735df91..1496b3dcb37 100644 --- a/src/components/Search/utils.ts +++ b/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 },