diff --git a/src/components/Header/Search/Search.module.css b/src/components/Header/Search/Search.module.css index 109727ac9..2f890e586 100644 --- a/src/components/Header/Search/Search.module.css +++ b/src/components/Header/Search/Search.module.css @@ -129,6 +129,11 @@ box-sizing: content-box; } +.hitWrapper { + max-height: 40vh; + overflow: overlay; +} + .hitWrapper ol { list-style: none; } @@ -155,11 +160,12 @@ .hitList li { list-style: none; + cursor: pointer; @apply pl-2; } -.hitList li:hover { - @apply bg-background-secondary; +.hitList li:hover * { + color: var(--orange-500); } .hitList li a { @@ -217,6 +223,11 @@ @apply mt-0; } + .hitWrapper { + max-height: calc(80vh - 100px); + overflow: scroll; + } + .hitList li { @apply pl-0; } diff --git a/src/components/Header/Search/Search.tsx b/src/components/Header/Search/Search.tsx index 9951358b6..4553e0722 100644 --- a/src/components/Header/Search/Search.tsx +++ b/src/components/Header/Search/Search.tsx @@ -1,4 +1,4 @@ -import React, { useState, useCallback } from "react" +import React, { useState, useCallback, useEffect } from "react" import styles from "./Search.module.css" import { useKeyPress } from "~/hooks/useKeyPress" @@ -11,6 +11,16 @@ export default function Search() { setIsOpen(true) }, [setIsOpen]) + + useEffect(() => { + const body = document.getElementsByTagName("body")[0] + if (isOpen) { + body.classList.add("mobile-sidebar-toggle") + } else { + body.classList.remove("mobile-sidebar-toggle") + } + }, [isOpen]) + const onClose = useCallback(() => { setTimeout(() => { setIsOpen(false)