chore(issue-details): Improve event header on mobile (#87241)

before: 
![Screenshot 2025-03-18 at 12 00
34 PM](https://github.com/user-attachments/assets/f6814bf7-5d92-4c77-8110-a4903a19121d)

after: 
![Screenshot 2025-03-18 at 12 00
30 PM](https://github.com/user-attachments/assets/80339a94-dd3a-4cc8-9bb5-d09f044b09d6)

Author: roggenkemper

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

@@ -1,4 +1,5 @@
 import {Fragment} from 'react';
+import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import ButtonBar from 'sentry/components/buttonBar';
@@ -19,6 +20,7 @@ import parseLinkHeader from 'sentry/utils/parseLinkHeader';
 import {keepPreviousData} from 'sentry/utils/queryClient';
 import useReplayCountForIssues from 'sentry/utils/replayCount/useReplayCountForIssues';
 import {useLocation} from 'sentry/utils/useLocation';
+import useMedia from 'sentry/utils/useMedia';
 import useOrganization from 'sentry/utils/useOrganization';
 import {hasDatasetSelector} from 'sentry/views/dashboards/utils';
 import {useGroupEventAttachments} from 'sentry/views/issueDetails/groupEventAttachments/useGroupEventAttachments';
@@ -51,6 +53,8 @@ export function IssueEventNavigation({event, group}: IssueEventNavigationProps)
   const eventView = useIssueDetailsEventView({group});
   const {eventCount} = useIssueDetails();
   const issueTypeConfig = getConfigForIssueType(group, group.project);
+  const theme = useTheme();
+  const isSmallScreen = useMedia(`(max-width: ${theme.breakpoints.small})`);
 
   const hideDropdownButton =
     !issueTypeConfig.pages.attachments.enabled &&
@@ -213,7 +217,9 @@ export function IssueEventNavigation({event, group}: IssueEventNavigationProps)
                   analyticsEventKey="issue_details.all_events_clicked"
                   analyticsEventName="Issue Details: All Events Clicked"
                 >
-                  {t('View More %s', issueTypeConfig.customCopy.eventUnits)}
+                  {isSmallScreen
+                    ? t('More %s', issueTypeConfig.customCopy.eventUnits)
+                    : t('View More %s', issueTypeConfig.customCopy.eventUnits)}
                 </LinkButton>
               )}
               {issueTypeConfig.pages.openPeriods.enabled && (
@@ -226,7 +232,7 @@ export function IssueEventNavigation({event, group}: IssueEventNavigationProps)
                   analyticsEventKey="issue_details.all_open_periods_clicked"
                   analyticsEventName="Issue Details: All Open Periods Clicked"
                 >
-                  {t('View More Open Periods')}
+                  {isSmallScreen ? t('More Open Periods') : t('View More Open Periods')}
                 </LinkButton>
               )}
               {issueTypeConfig.pages.checkIns.enabled && (
@@ -239,7 +245,7 @@ export function IssueEventNavigation({event, group}: IssueEventNavigationProps)
                   analyticsEventKey="issue_details.all_checks_ins_clicked"
                   analyticsEventName="Issue Details: All Checks-Ins Clicked"
                 >
-                  {t('View More Check-Ins')}
+                  {isSmallScreen ? t('More Check-Ins') : t('View More Check-Ins')}
                 </LinkButton>
               )}
               {issueTypeConfig.pages.uptimeChecks.enabled && (
@@ -252,7 +258,7 @@ export function IssueEventNavigation({event, group}: IssueEventNavigationProps)
                   analyticsEventKey="issue_details.all_uptime_checks_clicked"
                   analyticsEventName="Issue Details: All Uptime Checks Clicked"
                 >
-                  {t('View More Uptime Checks')}
+                  {isSmallScreen ? t('More Uptime Checks') : t('View More Uptime Checks')}
                 </LinkButton>
               )}
             </Fragment>

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

@@ -229,11 +229,12 @@ const EventInfoJumpToWrapper = styled('div')`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 0 ${space(2)} 0 ${space(0.5)};
-  flex-wrap: wrap;
+  padding: 0 ${space(2)};
+  flex-wrap: nowrap;
   min-height: ${MIN_NAV_HEIGHT}px;
-  @media (min-width: ${p => p.theme.breakpoints.small}) {
-    flex-wrap: nowrap;
+  @media (max-width: ${p => p.theme.breakpoints.small}) {
+    flex-wrap: wrap;
+    gap: 0;
   }
   border-bottom: 1px solid ${p => p.theme.translucentBorder};
 `;
@@ -244,6 +245,10 @@ const EventInfo = styled('div')`
   flex-direction: row;
   align-items: center;
   line-height: 1.2;
+
+  @media (max-width: ${p => p.theme.breakpoints.small}) {
+    padding-top: ${space(1)};
+  }
 `;
 
 const JumpTo = styled('div')`
@@ -290,7 +295,6 @@ const EventIdWrapper = styled('div')`
   display: flex;
   gap: ${space(0.25)};
   align-items: center;
-  margin-left: ${space(1.5)};
   font-weight: ${p => p.theme.fontWeightBold};
 
   button {