diff --git a/desktop/flipper-plugin/src/ui/MarkerTimeline.tsx b/desktop/flipper-plugin/src/ui/MarkerTimeline.tsx index 72d26a7d0..50a6cbf3f 100644 --- a/desktop/flipper-plugin/src/ui/MarkerTimeline.tsx +++ b/desktop/flipper-plugin/src/ui/MarkerTimeline.tsx @@ -63,14 +63,15 @@ const Point = styled(Layout.Horizontal)<{ right: 10, cursor: props.onClick ? 'pointer' : 'default', borderRadius: 3, - alignItems: 'flex-start', + alignItems: 'baseline', lineHeight: '16px', ':hover': { - backgroundColor: theme.selectionBackgroundColor, + backgroundColor: theme.backgroundWash, '> span': { whiteSpace: 'initial', }, }, + '::before': { position: 'relative', textAlign: 'center', @@ -115,12 +116,15 @@ const Time = styled.span({ }); Time.displayName = 'MakerTimeline:Time'; -const Code = styled(Typography.Text)({ +const Name = styled(Typography.Text)({ overflow: 'hidden', + opacity: 0.8, textOverflow: 'ellipsis', marginTop: -1, + marginLeft: theme.space.tiny, + fontFamily: 'monospace', }); -Code.displayName = 'MakerTimeline:Code'; +Name.displayName = 'MakerTimeline:Name'; type TimePoint = { timestamp: number; @@ -229,8 +233,8 @@ export class MarkerTimeline extends Component { number={ p.markerNames.length > 1 ? p.markerNames.length : undefined }> - {' '} - {p.markerNames.join(', ')} + {' '} + {p.markerNames.join(', ')} ); })} diff --git a/desktop/flipper-plugin/src/ui/data-inspector/TimelineDataDescription.tsx b/desktop/flipper-plugin/src/ui/data-inspector/TimelineDataDescription.tsx index 70e937a92..9e49ca847 100644 --- a/desktop/flipper-plugin/src/ui/data-inspector/TimelineDataDescription.tsx +++ b/desktop/flipper-plugin/src/ui/data-inspector/TimelineDataDescription.tsx @@ -69,7 +69,7 @@ export class TimelineDataDescription extends Component { )} -
+
{