fix(issues): Increase trace timeline tooltip target (#64598)

static/app/views/issueDetails/traceTimeline/traceTimeline.tsx

@@ -68,6 +68,7 @@ const TimelineOutline = styled('div')`
   height: 8px;
   border: 1px solid ${p => p.theme.innerBorder};
   border-radius: ${p => p.theme.borderRadius};
+  background-color: ${p => p.theme.backgroundSecondary};
 `;
 
 /**

static/app/views/issueDetails/traceTimeline/traceTimelineEvents.tsx

@@ -50,7 +50,7 @@ export function TraceTimelineEvents({event, width}: TraceTimelineEventsProps) {
   return (
     <Fragment>
       {/* Add padding to the total columns, 1 column of padding on each side */}
-      <TimelineColumns totalColumns={totalColumns + 2}>
+      <TimelineColumns style={{gridTemplateColumns: `repeat(${totalColumns + 2}, 1fr)`}}>
         {Array.from(eventsByColumn.entries()).map(([column, colEvents]) => {
           // Calculate the timestamp range that this column represents
           const timeRange = getChunkTimeRange(
@@ -105,7 +105,7 @@ export function TraceTimelineEvents({event, width}: TraceTimelineEventsProps) {
  *   <Col>...</Col>
  * </Columns>
  */
-const TimelineColumns = styled('ul')<{totalColumns: number}>`
+const TimelineColumns = styled('div')`
   /* Reset defaults for <ul> */
   list-style: none;
   margin: 0;
@@ -113,7 +113,6 @@ const TimelineColumns = styled('ul')<{totalColumns: number}>`
 
   /* Layout of the lines */
   display: grid;
-  grid-template-columns: repeat(${p => p.totalColumns}, 1fr);
   margin-top: -1px;
   height: 0;
 `;
@@ -163,7 +162,7 @@ function NodeGroup({
 
   return (
     <Fragment>
-      <TimelineColumns totalColumns={totalSubColumns}>
+      <TimelineColumns style={{gridTemplateColumns: `repeat(${totalSubColumns}, 1fr)`}}>
         {Array.from(eventsByColumn.entries()).map(([column, groupEvents]) => {
           const isCurrentNode = groupEvents.some(e => e.id === currentEventId);
           return (
@@ -186,7 +185,7 @@ function NodeGroup({
           );
         })}
       </TimelineColumns>
-      <TimelineColumns totalColumns={totalSubColumns}>
+      <TimelineColumns style={{gridTemplateColumns: `repeat(${totalSubColumns}, 1fr)`}}>
         <Tooltip
           title={<TraceTimelineTooltip event={event} timelineEvents={colEvents} />}
           overlayStyle={{
@@ -199,6 +198,7 @@ function NodeGroup({
           <TooltipHelper
             style={{
               gridColumn: columns.length > 1 ? `${minColumn} / ${maxColumn}` : columns[0],
+              width: 8 * columns.length,
             }}
             data-test-id={`trace-timeline-tooltip-${currentColumn}`}
           />
@@ -208,7 +208,7 @@ function NodeGroup({
   );
 }
 
-const EventColumn = styled('li')`
+const EventColumn = styled('div')`
   place-items: stretch;
   display: grid;
   align-items: center;
@@ -230,6 +230,7 @@ const IconNode = styled('div')`
   box-shadow: ${p => p.theme.dropShadowLight};
   user-select: none;
   background-color: ${p => color(p.theme.red200).alpha(0.3).string()};
+  margin-left: -8px;
 `;
 
 const PerformanceIconNode = styled(IconNode)`
@@ -252,7 +253,7 @@ const CurrentNodeRing = styled('div')`
   border-radius: 100%;
   position: absolute;
   top: -4px;
-  left: -4px;
+  left: -12px;
   animation: pulse 1s ease-out infinite;
 
   @keyframes pulse {
@@ -277,9 +278,8 @@ const CurrentIconNode = styled(IconNode)`
 `;
 
 const TooltipHelper = styled('span')`
-  height: 8px;
-  margin-top: -4px;
-  margin-right: -2px;
-  min-width: 8px;
+  height: 12px;
+  margin-left: -8px;
+  margin-top: -6px;
   z-index: 1;
 `;