fix(issues): Wrap issue search on mobile (#103206)

- moves search onto new line
- shrinks graph/tag gap and hides "& flags" from button

before
<img width="455" height="286" alt="image"
src="https://github.com/user-attachments/assets/69bffd7e-052c-4d65-89a0-2e09f1e067d6"
/>


after

<img width="437" height="310" alt="image"
src="https://github.com/user-attachments/assets/119fbd31-b732-47ae-ba53-adf5ce1f589d"
/>

Author: scttcper

static/app/views/issueDetails/streamline/eventDetailsHeader.tsx

@@ -114,11 +114,11 @@ export function EventDetailsHeader({group, event, project}: EventDetailsHeaderPr
             )}
             position="bottom-start"
           >
-            <Flex>
+            <Flex direction={{xs: 'column', md: 'row'}} gap="sm">
               <Grid
                 width="100%"
                 gap="sm"
-                columns="auto minmax(100px, 1fr) auto"
+                columns={{xs: '1fr', md: 'auto minmax(100px, 1fr) auto'}}
                 rows={`minmax(${theme.form.md.height}, auto)`}
               >
                 <FilterBar>
@@ -277,7 +277,12 @@ const StyledPageFilterBar = styled(PageFilterBar)`
 
 const GraphSection = styled('div')`
   display: flex;
-  gap: ${p => p.theme.space.lg};
+  gap: ${p => p.theme.space.sm};
+
+  @media (min-width: ${p => p.theme.breakpoints.sm}) {
+    gap: ${p => p.theme.space.lg};
+  }
+
   & > * {
     background: ${p => p.theme.background};
     border-radius: ${p => p.theme.borderRadius};

static/app/views/issueDetails/streamline/eventGraph.tsx

@@ -5,7 +5,6 @@ import {
   useRef,
   useState,
   type CSSProperties,
-  type RefObject,
 } from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
@@ -110,20 +109,6 @@ function createSeriesAndCount(stats: EventsStats) {
   );
 }
 
-function GraphPlaceholder({
-  ref,
-  height = 96,
-}: {
-  height?: number;
-  ref?: RefObject<HTMLDivElement | null>;
-}) {
-  return (
-    <LoadingChartContainer ref={ref}>
-      <Placeholder height={`${height}px`} testId="event-graph-loading" />
-    </LoadingChartContainer>
-  );
-}
-
 export function EventGraph({
   group,
   event,
@@ -509,7 +494,9 @@ export function EventGraph({
         ) : (
           <div />
         )}
-        <GraphPlaceholder ref={chartContainerRef} />
+        <Flex ref={chartContainerRef} justify="center" align="center" margin="0 md 0 xs">
+          <Placeholder height="90px" testId="event-graph-loading" />
+        </Flex>
       </Grid>
     );
   }
@@ -639,7 +626,7 @@ function SummaryContainer(props: FlexProps) {
   const theme = useTheme();
   return (
     <Flex
-      padding="lg"
+      padding="lg xs lg lg"
       direction="column"
       gap={theme.isChonk ? 'sm' : 'xs'}
       radius="md"
@@ -680,12 +667,6 @@ const ChartContainer = styled('div')`
   }
 `;
 
-const LoadingChartContainer = styled('div')`
-  position: relative;
-  padding: ${p => p.theme.space.sm} 0 ${p => p.theme.space.sm} 0;
-  margin: 0 ${p => p.theme.space.md};
-`;
-
 export const GraphAlert = styled(Alert)`
   padding-left: ${p => p.theme.space['2xl']};
   margin: 0 0 0 -${p => p.theme.space['2xl']};

static/app/views/issueDetails/streamline/issueTagsPreview.tsx

@@ -193,7 +193,7 @@ function DistributionsDrawerButton({
         replace
         disabled={tags.length === 0}
       >
-        {includeFeatureFlags
+        {includeFeatureFlags && !isScreenSmall
           ? tct('View[nbsp]All Tags[nbsp]&[nbsp]Flags', {
               nbsp: '\u00A0', // non-breaking space unicode character.
             })