fix(ui): Adjust sizing of page filter components to prevent overflow in more cases (#41979)

Fixes https://github.com/getsentry/sentry/issues/41932

static/app/components/organizations/pageFilterBar.tsx

@@ -37,7 +37,7 @@ const PageFilterBar = styled('div')<{condensed?: boolean}>`
   }
 
   & > * {
-    min-width: 6rem;
+    min-width: 7rem;
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: max-content;

static/app/components/projectPageFilter.tsx

@@ -43,7 +43,7 @@ type Props = {
   lockedMessageSubject?: string;
 
   /**
-   * Max character length for the dropdown title. Default is 20. This number
+   * Max character length for the dropdown title. Default is 25. This number
    * is used to determine how many projects to show, and how much to truncate.
    */
   maxTitleLength?: number;
@@ -80,7 +80,7 @@ type Props = {
 
 function ProjectPageFilter({
   specificProjectSlugs,
-  maxTitleLength = 30,
+  maxTitleLength = 25,
   resetParamsOnChange = [],
   disabled,
   ...otherProps

static/app/views/issueList/filters.tsx

@@ -58,10 +58,15 @@ function IssueListFilters({organization, savedSearch, query, sort, onSearch}: Pr
 
 const SearchContainer = styled('div')`
   display: flex;
-  gap: ${space(2)};
   flex-wrap: wrap;
+  column-gap: ${space(2)};
+  row-gap: ${space(1)};
   width: 100%;
   margin-bottom: ${space(2)};
+
+  @media (max-width: ${p => p.theme.breakpoints.small}) {
+    flex-direction: column;
+  }
 `;
 
 const StyledPageFilterBar = styled(PageFilterBar)`
@@ -73,10 +78,13 @@ const StyledPageFilterBar = styled(PageFilterBar)`
 const StyledIssueListSearchBar = styled(IssueListSearchBar)`
   flex: 1;
   width: 100%;
-  min-width: 20rem;
 
   @media (min-width: ${p => p.theme.breakpoints.small}) {
-    min-width: 25rem;
+    min-width: 20rem;
+  }
+
+  @media (min-width: ${p => p.theme.breakpoints.large}) {
+    min-width: 30rem;
   }
 `;