ref(ui): Improve spacing of index search (#7493)

Before

![clipboard.png](https://i.imgur.com/vSYamM9.png)

After

![clipboard.png](https://i.imgur.com/Q0GiaLD.png)

Author: evanpurkhiser

src/components/docsbot.tsx renamed to src/components/docsBotButton.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import SentryDocsBot from 'sentry-docs/logos/chatbot.svg';
 
-export function DocsBot() {
+export function DocsBotButton() {
   return (
     <DocsBotLink
       href="https://docsbot.ai/chat/skFEy0qDC01GrRrZ7Crs/EPqsd8nu2XmKzWnd45tL"

src/components/search.tsx

@@ -10,7 +10,7 @@ import DOMPurify from 'dompurify';
 import {Link, navigate} from 'gatsby';
 import algoliaInsights from 'search-insights';
 
-import {DocsBot} from 'sentry-docs/components/docsbot';
+import {DocsBotButton} from 'sentry-docs/components/docsBotButton';
 import {useOnClickOutside} from 'sentry-docs/utils';
 
 import {useKeyboardNavigate} from './hooks/useKeyboardNavigate';
@@ -155,19 +155,21 @@ export function Search({path, autoFocus, platforms = []}: Props) {
   }, []);
 
   return (
-    <SearchBar ref={ref}>
-      <input
-        type="search"
-        placeholder="Search"
-        aria-label="Search"
-        className="form-control search-input"
-        value={query}
-        onChange={({target: {value}}) => searchFor(value)}
-        onFocus={() => setInputFocus(true)}
-        ref={inputRef}
-      />
-      <Separator>Feeling bold?</Separator>
-      <DocsBot />
+    <div ref={ref}>
+      <SearchBar>
+        <input
+          type="search"
+          placeholder="Search"
+          aria-label="Search"
+          className="form-control search-input"
+          value={query}
+          onChange={({target: {value}}) => searchFor(value)}
+          onFocus={() => setInputFocus(true)}
+          ref={inputRef}
+        />
+        <Separator>Feeling bold?</Separator>
+        <DocsBotButton />
+      </SearchBar>
       {query.length >= 2 && inputFocus && (
         <div className="sgs-search-results">
           {loading && <Logo loading />}
@@ -261,16 +263,17 @@ export function Search({path, autoFocus, platforms = []}: Props) {
           )}
         </div>
       )}
-    </SearchBar>
+    </div>
   );
 }
 
 const SearchBar = styled('div')`
   display: flex;
   flex-direction: row;
+  align-items: center;
+  gap: 1rem;
 `;
 
 const Separator = styled('div')`
-  margin: 6px 8px;
   white-space: nowrap;
 `;

src/css/_includes/index.scss

@@ -112,7 +112,7 @@ div.footer-btns {
 .index-search {
   position: relative;
   max-width: 40rem;
-  margin: 0 auto;
+  margin: 3rem auto;
 
   .sgs-search-results {
     width: 100%;

src/css/_includes/search.scss

@@ -19,7 +19,7 @@
 
 .sgs-search-results {
   position: absolute;
-  margin-top: 3.5rem;
+  margin-top: 1rem;
   z-index: 5;
   border: 0.25rem solid var(--sgs-color-border);
   border-radius: 0.5rem;