fix(pageFilters): Fix overflow behavior (#41238)

**Before:**
<img width="1158" alt="Screen Shot 2022-11-10 at 1 04 26 PM"
src="https://user-images.githubusercontent.com/44172267/201205512-686943dd-a043-4afd-b2cd-8b2d72c4eb6c.png">
<img width="377" alt="Screen Shot 2022-11-10 at 1 05 17 PM"
src="https://user-images.githubusercontent.com/44172267/201205684-35b7aec3-0bae-45b8-9370-fc648abfc60e.png">


**After:**
<img width="1158" alt="Screen Shot 2022-11-10 at 1 04 07 PM"
src="https://user-images.githubusercontent.com/44172267/201205453-486ac363-728c-4fc6-b9e3-6a69b6eb864f.png">
<img width="377" alt="Screen Shot 2022-11-10 at 1 05 30 PM"
src="https://user-images.githubusercontent.com/44172267/201205725-212bd0a6-b498-4ef3-8557-fa450ad8cbc7.png">

static/app/components/datePageFilter.tsx

@@ -105,19 +105,18 @@ function DatePageFilter({router, resetParamsOnChange, disabled, ...props}: Props
 }
 
 const TitleContainer = styled('div')`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   flex: 1 1 0%;
   margin-left: ${space(1)};
   text-align: left;
+  ${p => p.theme.overflowEllipsis}
 `;
 
 const DropdownTitle = styled('div')`
   display: flex;
   align-items: center;
   flex: 1;
-  width: 100%;
+  width: max-content;
+  min-width: 0;
 `;
 
 export default withRouter(DatePageFilter);

static/app/components/environmentPageFilter.tsx

@@ -120,18 +120,18 @@ function EnvironmentPageFilter({
 const TitleContainer = styled('div')`
   display: flex;
   align-items: center;
-  justify-content: flex-start;
   flex: 1 1 0%;
   margin-left: ${space(1)};
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  text-align: left;
+  ${p => p.theme.overflowEllipsis}
 `;
 
 const DropdownTitle = styled('div')`
   display: flex;
   align-items: center;
   flex: 1;
+  width: max-content;
+  min-width: 0;
 `;
 
 export default withRouter<Props>(EnvironmentPageFilter);

static/app/components/organizations/pageFilterBar.tsx

@@ -41,6 +41,15 @@ const PageFilterBar = styled('div')<{condensed?: boolean}>`
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: max-content;
+
+    /* Prevent project filter from shrinking (it has in-built max character count)
+    except in mobile */
+    &:first-child {
+      flex-shrink: 0;
+      @media only screen and (max-width: ${p => p.theme.breakpoints.small}) {
+        flex-shrink: 1;
+      }
+    }
   }
 
   & > *:not(:first-child)::after {

static/app/components/projectPageFilter.tsx

@@ -216,19 +216,20 @@ function ProjectPageFilter({
 }
 
 const TitleContainer = styled('div')`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
   flex: 1 1 0%;
   margin-left: ${space(1)};
   text-align: left;
+  ${p => p.theme.overflowEllipsis}
 `;
 
 const DropdownTitle = styled('div')`
-  width: max-content;
   display: flex;
   align-items: center;
   flex: 1;
+  width: max-content;
+  min-width: 0;
 `;
 
 const StyledBadge = styled(Badge)`

static/app/views/issueList/filters.tsx

@@ -71,9 +71,9 @@ const SearchContainer = styled('div')`
 `;
 
 const StyledPageFilterBar = styled(PageFilterBar)`
-  flex: 1;
+  flex: 0 1 0;
   width: 100%;
-  max-width: 25rem;
+  max-width: 30rem;
 `;
 
 const StyledIssueListSearchBar = styled(IssueListSearchBar)`