|
@@ -36,13 +36,12 @@ export function TraceTimelineTooltip({event, timelineEvents}: TraceTimelineToolt
|
|
|
timelineEvent => timelineEvent.id !== event.id
|
|
|
);
|
|
|
const displayYouAreHere = filteredTimelineEvents.length !== timelineEvents.length;
|
|
|
+ const hasTitle = filteredTimelineEvents.length > 1 || displayYouAreHere;
|
|
|
return (
|
|
|
<UnstyledUnorderedList>
|
|
|
{displayYouAreHere && <YouAreHereItem>{t('You are here')}</YouAreHereItem>}
|
|
|
- <EventItemsWrapper>
|
|
|
- {(filteredTimelineEvents.length > 1 || displayYouAreHere) && (
|
|
|
- <EventItemsTitle>{t('Around the same time')}</EventItemsTitle>
|
|
|
- )}
|
|
|
+ <EventItemsWrapper hasTitle={hasTitle}>
|
|
|
+ {hasTitle && <EventItemsTitle>{t('Around the same time')}</EventItemsTitle>}
|
|
|
{filteredTimelineEvents.slice(0, 3).map(timelineEvent => {
|
|
|
const project = projects.find(p => p.slug === timelineEvent.project);
|
|
|
return (
|
|
@@ -115,10 +114,10 @@ const UnstyledUnorderedList = styled('div')`
|
|
|
width: 220px;
|
|
|
`;
|
|
|
|
|
|
-const EventItemsWrapper = styled('div')`
|
|
|
+const EventItemsWrapper = styled('div')<{hasTitle: boolean}>`
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- padding: ${space(1)} ${space(0.5)} ${space(0.5)} ${space(0.5)};
|
|
|
+ padding: ${p => space(p.hasTitle ? 1 : 0.5)} ${space(0.5)} ${space(0.5)} ${space(0.5)};
|
|
|
`;
|
|
|
|
|
|
const EventItemsTitle = styled('div')`
|