Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Mar 18, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
22c5564
new event header for mobile
roggenkemper Mar 17, 2025
5987709
style
roggenkemper Mar 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions static/app/views/issueDetails/streamline/eventNavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {Fragment} from 'react';
import {useTheme} from '@emotion/react';
import styled from '@emotion/styled';

import ButtonBar from 'sentry/components/buttonBar';
Expand All @@ -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';
Expand Down Expand Up @@ -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 &&
Expand Down Expand Up @@ -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 && (
Expand All @@ -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 && (
Expand All @@ -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 && (
Expand All @@ -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>
Expand Down
14 changes: 9 additions & 5 deletions static/app/views/issueDetails/streamline/eventTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
`;
Expand All @@ -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')`
Expand Down Expand Up @@ -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 {
Expand Down
Loading