fix(v2): adjust padding for custom search box location (#4856)

packages/docusaurus-theme-classic/src/theme/NavbarItem/SearchNavbarItem.tsx

@@ -8,16 +8,11 @@
 import React from 'react';
 import type {Props} from '@theme/NavbarItem/SearchNavbarItem';
 import SearchBar from '@theme/SearchBar';
-import styles from './styles.module.css';
 
 export default function SearchNavbarItem({mobile}: Props): JSX.Element | null {
   if (mobile) {
     return null;
   }
 
-  return (
-    <div className={styles.searchWrapper}>
-      <SearchBar />
-    </div>
-  );
+  return <SearchBar />;
 }

packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js

@@ -16,6 +16,7 @@ import useSearchQuery from '@theme/hooks/useSearchQuery';
 import {DocSearchButton, useDocSearchKeyboardEvents} from '@docsearch/react';
 import useAlgoliaContextualFacetFilters from '@theme/hooks/useAlgoliaContextualFacetFilters';
 import {translate} from '@docusaurus/Translate';
+import styles from './styles.module.css';
 
 let DocSearchModal = null;
 
@@ -164,6 +165,7 @@ function DocSearch({contextualSearch, ...props}) {
         />
       </Head>
 
+      <div className={styles.searchBox}>
         <DocSearchButton
           onTouchStart={importDocSearchModalIfNeeded}
           onFocus={importDocSearchModalIfNeeded}
@@ -180,7 +182,7 @@ function DocSearch({contextualSearch, ...props}) {
           createPortal(
             <DocSearchModal
               onClose={onClose}
-            initialScrollY={window.scrollY}
+              initialScrollY={window.scrosllY}
               initialQuery={initialQuery}
               navigator={navigator}
               transformItems={transformItems}
@@ -192,6 +194,7 @@ function DocSearch({contextualSearch, ...props}) {
             />,
             searchContainer.current,
           )}
+      </div>
     </>
   );
 }

packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css

@@ -11,6 +11,7 @@
 }
 
 .DocSearch-Button {
+  margin: 0;
   transition: all var(--ifm-transition-fast)
     var(--ifm-transition-timing-default);
 }

packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.module.css

@@ -6,8 +6,15 @@
  */
 
 @media (max-width: 996px) {
-  .searchWrapper {
+  .searchBox {
     position: absolute;
     right: var(--ifm-navbar-padding-horizontal);
   }
 }
+
+@media (min-width: 997px) {
+  .searchBox {
+    padding: var(--ifm-navbar-item-padding-vertical)
+      var(--ifm-navbar-item-padding-horizontal);
+  }
+}