From a9343a19162e9e515e0d2be3c14a354893c72c5e Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Fri, 28 May 2021 11:01:26 +0300
Subject: [PATCH] fix(v2): adjust padding for custom search box location
 (#4856)

---
 .../src/theme/NavbarItem/SearchNavbarItem.tsx |  7 +--
 .../src/theme/SearchBar/index.js              | 57 ++++++++++---------
 .../src/theme/SearchBar/styles.css            |  1 +
 .../src/theme/SearchBar}/styles.module.css    |  9 ++-
 4 files changed, 40 insertions(+), 34 deletions(-)
 rename packages/{docusaurus-theme-classic/src/theme/NavbarItem => docusaurus-theme-search-algolia/src/theme/SearchBar}/styles.module.css (64%)

diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/SearchNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/SearchNavbarItem.tsx
index 122cea489e..5a779eebdb 100644
--- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/SearchNavbarItem.tsx
+++ b/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 />;
 }
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
index 033a1054b3..19334ac28c 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
+++ b/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
-        onTouchStart={importDocSearchModalIfNeeded}
-        onFocus={importDocSearchModalIfNeeded}
-        onMouseOver={importDocSearchModalIfNeeded}
-        onClick={onOpen}
-        ref={searchButtonRef}
-        translations={{
-          buttonText: translatedSearchLabel,
-          buttonAriaLabel: translatedSearchLabel,
-        }}
-      />
+      <div className={styles.searchBox}>
+        <DocSearchButton
+          onTouchStart={importDocSearchModalIfNeeded}
+          onFocus={importDocSearchModalIfNeeded}
+          onMouseOver={importDocSearchModalIfNeeded}
+          onClick={onOpen}
+          ref={searchButtonRef}
+          translations={{
+            buttonText: translatedSearchLabel,
+            buttonAriaLabel: translatedSearchLabel,
+          }}
+        />
 
-      {isOpen &&
-        createPortal(
-          <DocSearchModal
-            onClose={onClose}
-            initialScrollY={window.scrollY}
-            initialQuery={initialQuery}
-            navigator={navigator}
-            transformItems={transformItems}
-            hitComponent={Hit}
-            resultsFooterComponent={resultsFooterComponent}
-            transformSearchClient={transformSearchClient}
-            {...props}
-            searchParameters={searchParameters}
-          />,
-          searchContainer.current,
-        )}
+        {isOpen &&
+          createPortal(
+            <DocSearchModal
+              onClose={onClose}
+              initialScrollY={window.scrosllY}
+              initialQuery={initialQuery}
+              navigator={navigator}
+              transformItems={transformItems}
+              hitComponent={Hit}
+              resultsFooterComponent={resultsFooterComponent}
+              transformSearchClient={transformSearchClient}
+              {...props}
+              searchParameters={searchParameters}
+            />,
+            searchContainer.current,
+          )}
+      </div>
     </>
   );
 }
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
index e57bb046de..c80dd71d37 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
+++ b/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);
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/styles.module.css b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.module.css
similarity index 64%
rename from packages/docusaurus-theme-classic/src/theme/NavbarItem/styles.module.css
rename to packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.module.css
index 361a1b239f..ca386bb12d 100644
--- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/styles.module.css
+++ b/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);
+  }
+}