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 (
+  return <SearchBar />;
-    <div className={styles.searchWrapper}>
-      <SearchBar />
-    </div>
-  );
 }

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,34 +165,36 @@ function DocSearch({contextualSearch, ...props}) {
         />
       </Head>
 
-      <DocSearchButton
+      <div className={styles.searchBox}>
-        onTouchStart={importDocSearchModalIfNeeded}
+        <DocSearchButton
-        onFocus={importDocSearchModalIfNeeded}
+          onTouchStart={importDocSearchModalIfNeeded}
-        onMouseOver={importDocSearchModalIfNeeded}
+          onFocus={importDocSearchModalIfNeeded}
-        onClick={onOpen}
+          onMouseOver={importDocSearchModalIfNeeded}
-        ref={searchButtonRef}
+          onClick={onOpen}
-        translations={{
+          ref={searchButtonRef}
-          buttonText: translatedSearchLabel,
+          translations={{
-          buttonAriaLabel: translatedSearchLabel,
+            buttonText: translatedSearchLabel,
-        }}
+            buttonAriaLabel: translatedSearchLabel,
-      />
+          }}
+        />
 
-      {isOpen &&
+        {isOpen &&
-        createPortal(
+          createPortal(
-          <DocSearchModal
+            <DocSearchModal
-            onClose={onClose}
+              onClose={onClose}
-            initialScrollY={window.scrollY}
+              initialScrollY={window.scrosllY}
-            initialQuery={initialQuery}
+              initialQuery={initialQuery}
-            navigator={navigator}
+              navigator={navigator}
-            transformItems={transformItems}
+              transformItems={transformItems}
-            hitComponent={Hit}
+              hitComponent={Hit}
-            resultsFooterComponent={resultsFooterComponent}
+              resultsFooterComponent={resultsFooterComponent}
-            transformSearchClient={transformSearchClient}
+              transformSearchClient={transformSearchClient}
-            {...props}
+              {...props}
-            searchParameters={searchParameters}
+              searchParameters={searchParameters}
-          />,
+            />,
-          searchContainer.current,
+            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);
+  }
+}