fix(issues): More adjustments for the page filter bar styling (#46794)

static/app/views/issueList/filters.tsx

@@ -42,13 +42,26 @@ const SearchContainer = styled('div')`
 `;
 
 const StyledPageFilterBar = styled(PageFilterBar)`
-  flex: 0 1 0;
+  display: flex;
+  flex-basis: content;
   width: 100%;
-  max-width: 45rem;
+  max-width: 43rem;
+  align-self: flex-start;
 
   > div > button {
     width: 100%;
   }
+
+  & > * {
+    /* Prevent date filter from shrinking below 6.5rem */
+    &:nth-last-child(2) {
+      min-width: 6.5rem;
+    }
+
+    &:last-child {
+      min-width: 0;
+    }
+  }
 `;
 
 export default IssueListFilters;

static/app/views/issueList/issueCategoryFilter.tsx

@@ -1,4 +1,5 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import styled from '@emotion/styled';
 
 import {CompactSelect, SelectOption} from 'sentry/components/compactSelect';
 import FeatureBadge from 'sentry/components/featureBadge';
@@ -29,16 +30,16 @@ function IssueCategoryFilter({
     (issueCategory?: IssueCategory, isTriggerLabel?: boolean) => {
       switch (issueCategory) {
         case IssueCategory.ERROR:
-          return t('Errors');
+          return <LabelWrapper>{t('Errors')}</LabelWrapper>;
         case IssueCategory.PERFORMANCE:
           return (
-            <React.Fragment>
+            <LabelWrapper>
               {t('Performance')}
               {!isTriggerLabel && !isPerformanceSeen && <FeatureBadge type="new" />}
-            </React.Fragment>
+            </LabelWrapper>
           );
         default:
-          return t('All Categories');
+          return <LabelWrapper>{t('All Categories')}</LabelWrapper>;
       }
     },
     [isPerformanceSeen]
@@ -118,4 +119,9 @@ function IssueCategoryFilter({
   );
 }
 
+const LabelWrapper = styled('div')`
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 export default IssueCategoryFilter;