fix: adjust spacing for custom search properly (#7164)

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -692,6 +692,16 @@ declare module '@theme/Navbar/MobileSidebar/Header' {
   export default function NavbarMobileSidebarHeader(): JSX.Element;
 }
 
+declare module '@theme/Navbar/Search' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    readonly children: ReactNode;
+  }
+
+  export default function NavbarSearch(props: Props): JSX.Element;
+}
+
 declare module '@theme/NavbarItem/DefaultNavbarItem' {
   import type {Props as NavbarNavLinkProps} from '@theme/NavbarItem/NavbarNavLink';
 

packages/docusaurus-theme-classic/src/theme/Navbar/Content/index.tsx

@@ -17,6 +17,7 @@ import {
 } from '@docusaurus/theme-common';
 import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
 import NavbarLogo from '@theme/Navbar/Logo';
+import NavbarSearch from '@theme/Navbar/Search';
 import styles from './styles.module.css';
 
 function useNavbarItems() {
@@ -73,7 +74,11 @@ export default function NavbarContent(): JSX.Element {
         <>
           <NavbarItems items={rightItems} />
           <NavbarColorModeToggle className={styles.colorModeToggle} />
-          {autoAddSearchBar && <SearchBar />}
+          {autoAddSearchBar && (
+            <NavbarSearch>
+              <SearchBar />
+            </NavbarSearch>
+          )}
         </>
       }
     />

packages/docusaurus-theme-classic/src/theme/Navbar/Search/index.tsx

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import type {Props} from '@theme/Navbar/Search';
+
+import styles from './styles.module.css';
+
+export default function NavbarSearch({children}: Props): JSX.Element {
+  return <div className={styles.searchBox}>{children}</div>;
+}

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

@@ -8,11 +8,16 @@
 import React from 'react';
 import type {Props} from '@theme/NavbarItem/SearchNavbarItem';
 import SearchBar from '@theme/SearchBar';
+import NavbarSearch from '@theme/Navbar/Search';
 
 export default function SearchNavbarItem({mobile}: Props): JSX.Element | null {
   if (mobile) {
     return null;
   }
 
-  return <SearchBar />;
+  return (
+    <NavbarSearch>
+      <SearchBar />
+    </NavbarSearch>
+  );
 }

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

@@ -17,7 +17,6 @@ import {DocSearchButton, useDocSearchKeyboardEvents} from '@docsearch/react';
 import type {SearchClient} from 'algoliasearch/lite';
 import {useAlgoliaContextualFacetFilters} from '@docusaurus/theme-search-algolia/client';
 import Translate, {translate} from '@docusaurus/Translate';
-import styles from './styles.module.css';
 
 import type {
   DocSearchModal as DocSearchModalType,
@@ -233,19 +232,17 @@ function DocSearch({
         />
       </Head>
 
-      <div className={styles.searchBox}>
-        <DocSearchButton
-          onTouchStart={importDocSearchModalIfNeeded}
-          onFocus={importDocSearchModalIfNeeded}
-          onMouseOver={importDocSearchModalIfNeeded}
-          onClick={onOpen}
-          ref={searchButtonRef}
-          translations={{
-            buttonText: translatedSearchLabel,
-            buttonAriaLabel: translatedSearchLabel,
-          }}
-        />
-      </div>
+      <DocSearchButton
+        onTouchStart={importDocSearchModalIfNeeded}
+        onFocus={importDocSearchModalIfNeeded}
+        onMouseOver={importDocSearchModalIfNeeded}
+        onClick={onOpen}
+        ref={searchButtonRef}
+        translations={{
+          buttonText: translatedSearchLabel,
+          buttonAriaLabel: translatedSearchLabel,
+        }}
+      />
 
       {isOpen &&
         DocSearchModal &&