Add media query to search button (#43084)

* add media query to search button

* useSmallScreen hook

e2e/test/scenarios/onboarding/command-palette.cy.spec.js

@@ -14,6 +14,7 @@ import {
   pressPageUp,
   pressHome,
   pressEnd,
+  commandPaletteButton,
 } from "e2e/support/helpers";
 
 const { admin } = USERS;
@@ -204,4 +205,10 @@ describe("command palette", () => {
     openCommandPalette();
     commandPalette().should("exist");
   });
+
+  it("The Search button should resize when on mobile", () => {
+    cy.viewport("iphone-x");
+    cy.visit("/");
+    commandPaletteButton().should("not.contain.text", "search");
+  });
 });

frontend/src/metabase/nav/components/search/SearchButton/SearchButton.tsx

@@ -2,6 +2,7 @@ import { useKBar, VisualState } from "kbar";
 import { useCallback } from "react";
 import { t } from "ttag";
 
+import useIsSmallScreen from "metabase/hooks/use-is-small-screen";
 import { METAKEY } from "metabase/lib/browser";
 import { Button, Icon, Tooltip } from "metabase/ui";
 
@@ -13,22 +14,38 @@ export const SearchButton = () => {
     setVisualState(VisualState.showing);
   }, [setVisualState]);
 
-  return (
-    <Tooltip label={`${t`Search...`} (${METAKEY}+k)`}>
+  const isSmallScreen = useIsSmallScreen();
+
+  if (isSmallScreen) {
+    return (
       <Button
         h="36px"
-        w="240px"
         leftIcon={<Icon name="search" />}
+        variant="subtle"
         onClick={handleClick}
-        // TODO: Adjust this with Mantine V7
-        styles={{
-          inner: {
-            justifyContent: "start",
-          },
-        }}
-      >
-        {t`Search`}
-      </Button>
-    </Tooltip>
-  );
+        color="text-medium"
+        aria-label="Search"
+      />
+    );
+  } else {
+    return (
+      <Tooltip label={`${t`Search...`} (${METAKEY}+k)`}>
+        <Button
+          h="36px"
+          w="240px"
+          leftIcon={<Icon name="search" />}
+          onClick={handleClick}
+          // TODO: Adjust this with Mantine V7
+          styles={{
+            inner: {
+              justifyContent: "start",
+            },
+          }}
+          aria-label="Search"
+        >
+          {t`Search`}
+        </Button>
+      </Tooltip>
+    );
+  }
 };