fix(images-loaded-modal): Fix searchbar alignment (#27352)

static/app/components/events/interfaces/debugMeta-v2/debugImageDetails/candidate/actions.tsx

@@ -147,7 +147,7 @@ export default Actions;
 const StyledDropdownLink = styled(DropdownLink)`
   display: none;
 
-  @media (min-width: ${props => props.theme.breakpoints[2]}) {
+  @media (min-width: ${props => props.theme.breakpoints[4]}) {
     display: flex;
     align-items: center;
     transition: none;
@@ -155,7 +155,7 @@ const StyledDropdownLink = styled(DropdownLink)`
 `;
 
 const StyledButtonBar = styled(ButtonBar)`
-  @media (min-width: ${props => props.theme.breakpoints[2]}) {
+  @media (min-width: ${props => props.theme.breakpoints[4]}) {
     display: none;
   }
 `;

static/app/components/events/interfaces/debugMeta-v2/debugImageDetails/candidates.tsx

@@ -331,7 +331,7 @@ class Candidates extends React.Component<Props, State> {
             />
           </Title>
           {!!candidates.length && (
-            <SearchBarAction
+            <StyledSearchBarAction
               query={searchTerm}
               onChange={value => this.handleChangeSearchTerm(value)}
               placeholder={t('Search debug file candidates')}
@@ -397,7 +397,12 @@ const Title = styled('div')`
   align-items: center;
   font-weight: 600;
   color: ${p => p.theme.gray400};
-  margin-bottom: ${space(2)};
+  height: 32px;
+  flex: 1;
+
+  @media (min-width: ${props => props.theme.breakpoints[0]}) {
+    margin-bottom: ${space(1)};
+  }
 `;
 
 const StyledPanelTable = styled(PanelTable)`
@@ -406,7 +411,11 @@ const StyledPanelTable = styled(PanelTable)`
 
   height: 100%;
 
-  @media (min-width: ${props => props.theme.breakpoints[2]}) {
+  @media (min-width: ${props => props.theme.breakpoints[4]}) {
     overflow: visible;
   }
 `;
+
+const StyledSearchBarAction = styled(SearchBarAction)`
+  margin-bottom: ${space(1.5)};
+`;