Polishing

src/css/custom.css

@@ -363,9 +363,15 @@ nav.menu {
   display: none !important;
 }
 
-.algolia-autocomplete .ds-dropdown-menu {
+.algolia-autocomplete.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
   margin-top: 0 !important;
   left: 0 !important;
+  overflow: auto;
+  top: 44px;
+  border-radius: 0;
+  box-shadow: none;
+  height: 296px;
+  background: white;
 }
 
 .algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-] {

src/theme/DocRoot/Layout/Sidebar/Sidebar.module.css

@@ -43,7 +43,7 @@
   border-radius: 8px;
 }
 
-.content {
+.initialCase {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -73,4 +73,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-}
+}
+
+.modalContent {
+  height: 340px;
+}

src/theme/DocRoot/Layout/Sidebar/index.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from "react"
 import Sidebar from "@theme-original/DocRoot/Layout/Sidebar"
 import Search from "docusaurus-lunr-search/src/theme/SearchBar"
-import Modal from "react-modal"
+import {useHistory} from "react-router-dom"
 import PageSearchIcon from "@site/static/icons/basic/page-search.svg"
 import EnterKeyIcon from "@site/static/icons/basic/enter-key.svg"
 import UpDownKeyIcon from "@site/static/icons/basic/up-down-key.svg"
@@ -10,6 +10,7 @@ import styles from "./Sidebar.module.css"
 
 export default function SidebarWrapper(props) {
   const [isSearchModalVisible, setIsSearchModalVisible] = useState(false)
+  const history = useHistory()
 
   function handleSearchClick() {
     setIsSearchModalVisible(true)
@@ -38,6 +39,16 @@ export default function SidebarWrapper(props) {
     })
   }, [])
 
+  useEffect(() => {
+    const unlisten = history.listen((location, action) => {
+      setIsSearchModalVisible(false)
+    })
+
+    return () => {
+      unlisten()
+    }
+  }, [history])
+
   return (
     <div className="sidebar-search-container flex flex-col">
       <div className={styles.inputContainer} onClick={handleSearchClick}>
@@ -48,11 +59,13 @@ export default function SidebarWrapper(props) {
         <>
           <div onClick={handleSearchModalClose} className={styles.overlay}></div>
           <div className={styles.modal}>
-            <Search />
-            <div className={styles.content}>
-              <PageSearchIcon />
-              <div className="mt-2 font-bold">Search Docs</div>
-              <div className="text-content-tiny text-tailCall-dark-100">Search anything within the docs</div>
+            <div className={styles.modalContent}>
+              <Search />
+              <div className={styles.initialCase}>
+                <PageSearchIcon />
+                <div className="mt-2 font-bold">Search Docs</div>
+                <div className="text-content-tiny text-tailCall-dark-100">Search anything within the docs</div>
+              </div>
             </div>
             <div className={styles.footer}>
               <div className={styles.navigationInfoItem}>