ref(pageFilters): Use grid display for Project Details filter bar (#34144)

static/app/views/projectDetail/projectDetail.tsx

@@ -274,7 +274,6 @@ class ProjectDetail extends AsyncView<Props, State> {
                     query={query}
                     onSearch={this.handleSearch}
                     tagValueLoader={this.tagValueLoader}
-                    hasBottomMargin={false}
                   />
                 </ProjectFiltersWrapper>
 

static/app/views/projectDetail/projectFilters.tsx

@@ -16,15 +16,9 @@ type Props = {
   onSearch: (q: string) => void;
   query: string;
   tagValueLoader: TagValueLoader;
-  hasBottomMargin?: boolean;
 };
 
-function ProjectFilters({
-  query,
-  tagValueLoader,
-  onSearch,
-  hasBottomMargin = true,
-}: Props) {
+function ProjectFilters({query, tagValueLoader, onSearch}: Props) {
   const getTagValues = async (tag: Tag, currentQuery: string): Promise<string[]> => {
     const values = await tagValueLoader(tag.key, currentQuery);
     return values.map(({value}) => value);
@@ -32,51 +26,40 @@ function ProjectFilters({
 
   return (
     <FiltersWrapper>
-      <StyledPageFilterBar hasBottomMargin={hasBottomMargin}>
+      <PageFilterBar>
         <EnvironmentPageFilter />
         <DatePageFilter alignDropdown="left" />
-      </StyledPageFilterBar>
-      <SearchBarWrapper>
-        <GuideAnchor target="releases_search" position="bottom">
-          <SmartSearchBar
-            searchSource="project_filters"
-            query={query}
-            placeholder={t('Search by release version, build, package, or stage')}
-            maxSearchItems={5}
-            hasRecentSearches={false}
-            supportedTags={{
-              ...SEMVER_TAGS,
-              release: {
-                key: 'release',
-                name: 'release',
-              },
-            }}
-            onSearch={onSearch}
-            onGetTagValues={getTagValues}
-          />
-        </GuideAnchor>
-      </SearchBarWrapper>
+      </PageFilterBar>
+      <GuideAnchor target="releases_search" position="bottom">
+        <SmartSearchBar
+          searchSource="project_filters"
+          query={query}
+          placeholder={t('Search by release version, build, package, or stage')}
+          maxSearchItems={5}
+          hasRecentSearches={false}
+          supportedTags={{
+            ...SEMVER_TAGS,
+            release: {
+              key: 'release',
+              name: 'release',
+            },
+          }}
+          onSearch={onSearch}
+          onGetTagValues={getTagValues}
+        />
+      </GuideAnchor>
     </FiltersWrapper>
   );
 }
 
-const StyledPageFilterBar = styled(PageFilterBar)<{hasBottomMargin: boolean}>`
-  margin-bottom: ${p => (p.hasBottomMargin ? `${space(1)}` : '0')};
-  margin-right: ${space(1)};
-
-  @media (max-width: ${p => p.theme.breakpoints[2]}) {
-    margin-bottom: ${space(1)};
-  }
-`;
-
 const FiltersWrapper = styled('div')`
-  display: flex;
-  flex-wrap: wrap;
-`;
+  display: grid;
+  grid-template-columns: minmax(0, max-content) 1fr;
+  gap: ${space(2)};
 
-const SearchBarWrapper = styled('div')`
-  flex: 1;
-  flex-basis: 430px;
+  @media (max-width: ${p => p.theme.breakpoints[0]}) {
+    grid-template-columns: minmax(0, 1fr);
+  }
 `;
 
 export default ProjectFilters;