feat(page-filters): Add condensed option to page filter bar (#33714)

* add condensed option to page filter bar

* add in dashboards style

* add missing condensed

static/app/components/organizations/pageFilterBar.tsx

@@ -1,10 +1,16 @@
 import styled from '@emotion/styled';
 
-const PageFilterBar = styled('div')`
+const PageFilterBar = styled('div')<{condensed?: boolean}>`
   display: flex;
   position: relative;
   border-radius: ${p => p.theme.borderRadius};
   height: ${p => p.theme.form.default.height}px;
+  ${p =>
+    p.condensed &&
+    `
+    max-width: 100%;
+    width: max-content;
+  `}
 
   &::after {
     content: '';

static/app/views/dashboardsV2/detail.tsx

@@ -631,7 +631,7 @@ class DashboardDetail extends Component<Props, State> {
                 widgetLimitReached={widgetLimitReached}
               />
             </StyledPageHeader>
-            <DashboardPageFilterBar>
+            <DashboardPageFilterBar condensed>
               <ProjectPageFilter />
               <EnvironmentPageFilter alignDropdown="left" />
               <DatePageFilter alignDropdown="left" />
@@ -736,7 +736,7 @@ class DashboardDetail extends Component<Props, State> {
               </Layout.Header>
               <Layout.Body>
                 <Layout.Main fullWidth>
-                  <DashboardPageFilterBar>
+                  <DashboardPageFilterBar condensed>
                     <ProjectPageFilter />
                     <EnvironmentPageFilter alignDropdown="left" />
                     <DatePageFilter alignDropdown="left" />
@@ -806,8 +806,6 @@ const StyledPageContent = styled(PageContent)`
 
 const DashboardPageFilterBar = styled(PageFilterBar)`
   margin-bottom: ${space(2)};
-  width: max-content;
-  max-width: 100%;
 `;
 
 export default withApi(withOrganization(DashboardDetail));

static/app/views/eventsV2/results.tsx

@@ -507,7 +507,7 @@ class Results extends React.Component<Props, State> {
               <Top fullWidth>
                 {this.renderError(error)}
                 {hasPageFilters && (
-                  <StyledPageFilterBar>
+                  <StyledPageFilterBar condensed>
                     <ProjectPageFilter />
                     <EnvironmentPageFilter />
                     <DatePageFilter alignDropdown="left" />
@@ -585,8 +585,6 @@ const StyledPageContent = styled(PageContent)`
 `;
 
 const StyledPageFilterBar = styled(PageFilterBar)`
-  max-width: 100%;
-  width: max-content;
   margin-bottom: ${space(1)};
 `;
 

static/app/views/releases/list/index.tsx

@@ -506,7 +506,7 @@ class ReleasesList extends AsyncView<Props, State> {
 
             {this.renderHealthCta()}
 
-            <ReleasesPageFilterBar>
+            <ReleasesPageFilterBar condensed>
               <ProjectPageFilter />
               <EnvironmentPageFilter />
               <DatePageFilter alignDropdown="left" />
@@ -590,8 +590,6 @@ const AlertText = styled('div')`
 `;
 
 const ReleasesPageFilterBar = styled(PageFilterBar)`
-  width: max-content;
-  max-width: 100%;
   margin-bottom: ${space(1)};
 `;
 

static/app/views/replays/filters.tsx

@@ -19,10 +19,10 @@ function ReplaysFilters({organization, handleSearchQuery, query}: Props) {
   return (
     <FilterContainer>
       <SearchContainer>
-        <StyledPageFilterBar>
+        <StyledPageFilterBar condensed>
           <ProjectPageFilter />
           <EnvironmentPageFilter />
-          <DatePageFilter />
+          <DatePageFilter alignDropdown="left" />
         </StyledPageFilterBar>
         <SearchBar
           organization={organization}
@@ -55,8 +55,7 @@ const SearchContainer = styled('div')`
 `;
 
 const StyledPageFilterBar = styled(PageFilterBar)`
-  width: max-content;
-  max-width: 100%;
+  margin-bottom: ${space(1)};
 `;
 
 export default ReplaysFilters;