From 8640418995ef2eb590949f6cbb6989118d3eacb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?=
 <francoischalifour@users.noreply.github.com>
Date: Wed, 2 Sep 2020 08:50:33 +0200
Subject: [PATCH] fix(docsearch): group search button elements in containers
 (#74)

---
 packages/docsearch-css/src/button.css            | 10 ++++++++++
 packages/docsearch-react/src/DocSearchButton.tsx | 16 ++++++++++------
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/docsearch-css/src/button.css b/packages/docsearch-css/src/button.css
index 28deebc3..1defba7e 100644
--- a/packages/docsearch-css/src/button.css
+++ b/packages/docsearch-css/src/button.css
@@ -8,6 +8,7 @@
   display: flex;
   font-weight: 500;
   height: 36px;
+  justify-content: space-between;
   margin: 0 0 0 16px;
   padding: 0 8px;
   user-select: none;
@@ -22,6 +23,11 @@
   outline: none;
 }
 
+.DocSearch-Button-Container {
+  align-items: center;
+  display: flex;
+}
+
 .DocSearch-Search-Icon {
   stroke-width: 1.6;
 }
@@ -35,6 +41,10 @@
   padding: 0 12px 0 6px;
 }
 
+.DocSearch-Button-Keys {
+  display: flex;
+}
+
 .DocSearch-Button-Key {
   align-items: center;
   background: var(--docsearch-key-gradient);
diff --git a/packages/docsearch-react/src/DocSearchButton.tsx b/packages/docsearch-react/src/DocSearchButton.tsx
index d987a5ee..e4956da2 100644
--- a/packages/docsearch-react/src/DocSearchButton.tsx
+++ b/packages/docsearch-react/src/DocSearchButton.tsx
@@ -41,13 +41,17 @@ export const DocSearchButton = React.forwardRef<
       {...props}
       ref={ref}
     >
-      <SearchIcon />
-      <span className="DocSearch-Button-Placeholder">Search</span>
+      <div className="DocSearch-Button-Container">
+        <SearchIcon />
+        <span className="DocSearch-Button-Placeholder">Search</span>
+      </div>
 
-      <span className="DocSearch-Button-Key">
-        {key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : key}
-      </span>
-      <span className="DocSearch-Button-Key">K</span>
+      <div className="DocSearch-Button-Keys">
+        <span className="DocSearch-Button-Key">
+          {key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : key}
+        </span>
+        <span className="DocSearch-Button-Key">K</span>
+      </div>
     </button>
   );
 });