From 751d400b6814723291f5e7ecb263479359527b00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Vannicatte?= <vannicattec@gmail.com>
Date: Fri, 23 Jul 2021 16:08:07 +0200
Subject: [PATCH] fix: hide `keys` container on mobile

---
 packages/docsearch-css/src/button.css            | 7 ++-----
 packages/docsearch-react/src/DocSearchButton.tsx | 6 +++---
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/docsearch-css/src/button.css b/packages/docsearch-css/src/button.css
index 6756a7c97..370f4e2bb 100644
--- a/packages/docsearch-css/src/button.css
+++ b/packages/docsearch-css/src/button.css
@@ -63,11 +63,8 @@
 }
 
 @media (max-width: 750px) {
-  .DocSearch-Button-KeySeparator,
-  .DocSearch-Button-Key {
-    display: none;
-  }
-
+  .DocSearch-Button-Keys,
+  .DocSearch-Button-Key,
   .DocSearch-Button-Placeholder {
     display: none;
   }
diff --git a/packages/docsearch-react/src/DocSearchButton.tsx b/packages/docsearch-react/src/DocSearchButton.tsx
index 6c97d894b..19d2eb960 100644
--- a/packages/docsearch-react/src/DocSearchButton.tsx
+++ b/packages/docsearch-react/src/DocSearchButton.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { ControlKeyIcon } from './icons/ControlKeyIcon';
 import { SearchIcon } from './icons/SearchIcon';
@@ -49,12 +49,12 @@ export const DocSearchButton = React.forwardRef<
 
       <span className="DocSearch-Button-Keys">
         {key !== null && (
-          <Fragment>
+          <>
             <span className="DocSearch-Button-Key">
               {key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : key}
             </span>
             <span className="DocSearch-Button-Key">K</span>
-          </Fragment>
+          </>
         )}
       </span>
     </button>