fix(release-filter): Enforce max width on CompactSelect (#45997)

The max width wasn't being properly enforced when declared in the parent
which resulted in the compact select overflowing and blocking the Save
and Cancel buttons from being seen. Re-styling the compact select fixes
this issue.

static/app/views/dashboards/filtersBar.tsx

@@ -57,15 +57,13 @@ export default function FiltersBar({
       </PageFilterBar>
       <Fragment>
         <FilterButtons>
-          <FilterButton>
-            <ReleasesProvider organization={organization} selection={selection}>
-              <ReleasesSelectControl
-                handleChangeFilter={onDashboardFilterChange}
-                selectedReleases={selectedReleases}
-                isDisabled={isEditingDashboard}
-              />
-            </ReleasesProvider>
-          </FilterButton>
+          <ReleasesProvider organization={organization} selection={selection}>
+            <ReleasesSelectControl
+              handleChangeFilter={onDashboardFilterChange}
+              selectedReleases={selectedReleases}
+              isDisabled={isEditingDashboard}
+            />
+          </ReleasesProvider>
         </FilterButtons>
         {hasUnsavedChanges && !isEditingDashboard && !isPreview && (
           <FilterButtons>
@@ -102,9 +100,3 @@ const FilterButtons = styled(ButtonBar)`
     gap: ${space(1.5)};
   }
 `;
-
-const FilterButton = styled('div')`
-  @media (min-width: ${p => p.theme.breakpoints.small}) {
-    max-width: 300px;
-  }
-`;

static/app/views/dashboards/releasesSelectControl.tsx

@@ -53,7 +53,7 @@ function ReleasesSelectControl({
   const activeReleasesSet = new Set(activeReleases);
 
   return (
-    <CompactSelect
+    <StyledCompactSelect
       multiple
       clearable
       searchable
@@ -85,7 +85,7 @@ function ReleasesSelectControl({
           ],
         },
       ]}
-      onChange={opts => setActiveReleases(opts.map(opt => opt.value))}
+      onChange={opts => setActiveReleases(opts.map(opt => opt.value as string))}
       onClose={() => {
         resetSearch();
         handleChangeFilter?.({
@@ -112,6 +112,12 @@ const StyledBadge = styled(Badge)`
   flex-shrink: 0;
 `;
 
+const StyledCompactSelect = styled(CompactSelect)`
+  @media (min-width: ${p => p.theme.breakpoints.small}) {
+    max-width: 300px;
+  }
+`;
+
 const ButtonLabelWrapper = styled('span')`
   width: 100%;
   text-align: left;