collate z-index

Author: dashed

src/sentry/static/sentry/app/views/organizationEventsV2/transactionView/minimap.tsx

@@ -16,6 +16,7 @@ import {
 } from './utils';
 import {DragManagerChildrenProps} from './dragManager';
 import {ParsedTraceType, TickAlignment, SpanType, SpanChildrenLookupType} from './types';
+import {zIndex} from './styles';
 
 export const MINIMAP_CONTAINER_HEIGHT = 106;
 export const MINIMAP_SPAN_BAR_HEIGHT = 5;
@@ -525,7 +526,7 @@ const MinimapContainer = styled('div')`
   position: sticky;
   left: 0;
   top: 0;
-  z-index: 99999999999;
+  z-index: ${zIndex.minimapContainer};
 
   background-color: #fff;
 

src/sentry/static/sentry/app/views/organizationEventsV2/transactionView/spanBar.tsx

@@ -20,7 +20,7 @@ import {
   MINIMAP_SPAN_BAR_HEIGHT,
   NUM_OF_SPANS_FIT_IN_MINI_MAP,
 } from './minimap';
-import {SPAN_ROW_HEIGHT, SpanRow} from './styles';
+import {SPAN_ROW_HEIGHT, SpanRow, zIndex} from './styles';
 import * as DividerHandlerManager from './dividerHandlerManager';
 import SpanDetail from './spanDetail';
 
@@ -663,7 +663,7 @@ export const DividerLine = styled('div')`
   transform: translateX(-50%);
 
   background-color: #cdc7d5;
-  z-index: 999999;
+  z-index: ${zIndex.dividerLine};
 
   &.hovering {
     width: 4px !important;
@@ -723,7 +723,7 @@ const SpanTreeTogglerContainer = styled('div')`
 
   margin-right: 8px;
 
-  z-index: 99999;
+  z-index: ${zIndex.spanTreeToggler};
 
   user-select: none;
 

src/sentry/static/sentry/app/views/organizationEventsV2/transactionView/styles.tsx

@@ -2,6 +2,12 @@ import styled from 'react-emotion';
 
 import space from 'app/styles/space';
 
+export const zIndex = {
+  minimapContainer: 99999999999,
+  dividerLine: 999999,
+  spanTreeToggler: 99999,
+};
+
 export const SPAN_ROW_HEIGHT = 25;
 
 export const SpanRow = styled('div')`