Make sure filter button only appears when search bar is open (#33077)

frontend/src/metabase/nav/components/SearchBar.tsx

@@ -194,16 +194,19 @@ function SearchBarView({ location, onSearchActive, onSearchInactive }: Props) {
           onKeyPress={handleInputKeyPress}
           ref={searchInput}
         />
-        <SearchFunnelButton
-          icon="filter"
-          data-is-filtered={isFiltered}
-          data-testid="search-bar-filter-button"
-          isFiltered={isFiltered}
-          onClick={e => {
-            e.stopPropagation();
-            setIsFilterModalOpen(true);
-          }}
-        />
+
+        {(!isSmallScreen() || isActive) && (
+          <SearchFunnelButton
+            icon="filter"
+            data-is-filtered={isFiltered}
+            data-testid="search-bar-filter-button"
+            isFiltered={isFiltered}
+            onClick={e => {
+              e.stopPropagation();
+              setIsFilterModalOpen(true);
+            }}
+          />
+        )}
         {isSmallScreen() && isActive && (
           <CloseSearchButton onClick={handleClickOnClose}>
             <Icon name="close" />

frontend/src/metabase/nav/components/SearchBar.unit.spec.tsx

@@ -17,6 +17,7 @@ import {
 import { CollectionItem, RecentItem } from "metabase-types/api";
 import SearchBar from "metabase/nav/components/SearchBar";
 import { checkNotNull } from "metabase/core/utils/types";
+import * as domUtils from "metabase/lib/dom";
 
 const TEST_SEARCH_RESULTS: CollectionItem[] = [
   "Card ABC",
@@ -97,6 +98,34 @@ describe("SearchBar", () => {
     });
   });
 
+  describe("rendering filter button with screen size", () => {
+    it("should not render filter button on small screens", () => {
+      const isSmallScreenMock = jest.spyOn(domUtils, "isSmallScreen");
+      isSmallScreenMock.mockReturnValue(true);
+
+      setup();
+
+      expect(
+        screen.queryByTestId("search-bar-filter-button"),
+      ).not.toBeInTheDocument();
+
+      isSmallScreenMock.mockRestore();
+    });
+
+    it("should render filter button on large screens", () => {
+      const isSmallScreenMock = jest.spyOn(domUtils, "isSmallScreen");
+      isSmallScreenMock.mockReturnValue(false);
+
+      setup();
+
+      expect(
+        screen.getByTestId("search-bar-filter-button"),
+      ).toBeInTheDocument();
+
+      isSmallScreenMock.mockRestore();
+    });
+  });
+
   describe("focusing on search bar", () => {
     it("should render `Recent Searches` list when clicking the search bar", async () => {
       setup();