diff --git a/static/app/components/events/breadcrumbs/breadcrumbsTimeline.tsx b/static/app/components/events/breadcrumbs/breadcrumbsTimeline.tsx index b8015564ee6a8..67fd9e6edbda5 100644 --- a/static/app/components/events/breadcrumbs/breadcrumbsTimeline.tsx +++ b/static/app/components/events/breadcrumbs/breadcrumbsTimeline.tsx @@ -144,6 +144,7 @@ const Subtitle = styled('p')` const Timestamp = styled('div')` margin-right: ${space(1)}; + text-align: right; color: ${p => p.theme.subText}; font-size: ${p => p.theme.fontSizeSmall}; span { diff --git a/static/app/components/timeline/index.tsx b/static/app/components/timeline/index.tsx index 44b57780b2d25..5cda61692a88a 100644 --- a/static/app/components/timeline/index.tsx +++ b/static/app/components/timeline/index.tsx @@ -62,16 +62,13 @@ export const Item = forwardRef(function _Item( const Row = styled('div')<{showLastLine?: boolean}>` position: relative; color: ${p => p.theme.subText}; - display: grid; align-items: start; - grid-template: auto auto / 22px 1fr auto; - grid-column-gap: ${space(1)}; - margin: ${space(1)} 0; - &:first-child { - margin-top: 0; - } + display: grid; + grid-template-columns: subgrid; + grid-column: 1/-1; + grid-row-gap: ${space(0.5)}; + &:last-child { - margin-bottom: 0; /* Show/hide connecting line from the last element of the timeline */ background: ${p => (p.showLastLine ? 'transparent' : p.theme.background)}; } @@ -136,6 +133,10 @@ export const Data = styled('div')` export const Container = styled('div')` position: relative; + display: grid; + grid-template: auto auto / 22px 1fr auto; + grid-row-gap: ${space(1)}; + grid-column-gap: ${space(1)}; /* vertical line connecting items */ &::before { content: '';