fix(trace-spans): fixed small styling bugs

[aadamgough]

Summary

Trace span styling has small bug for highlighting logs and the millisecond tag as well. In the video attached, the styling is fixed.

Type of Change

• Bug fix

Testing

See video

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

Screen.Recording.2025-11-11.at.1.24.22.PM.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Nov 11, 2025 9:31pm

[greptile-apps]

Greptile Overview

Greptile Summary

This PR fixes styling bugs in the trace span timeline visualization. The changes refactor hover interaction handling and correct visual issues with the timeline elements.

Key improvements:

• Fixed timeline overflow from overflow-visible to overflow-hidden to prevent hover line from extending beyond timeline bounds
• Refactored hover tracking from global window listener to component-scoped callbacks, improving performance and reducing unnecessary re-renders
• Improved hover tooltip positioning by moving it outside the scrollable container and tracking Y-axis position
• Fixed hover line styling to use inset-y-0 instead of negative margins for proper containment
• Simplified prop interface by replacing hoveredPercent, hoveredWorkflowMs, and forwardHover with cleaner onTimelineHover and onTimelineLeave callbacks
• Enhanced tooltip styling with border and shadow-lg for better visibility

Confidence Score: 5/5

• This PR is safe to merge with no risk - purely cosmetic styling fixes with improved architecture
• The changes are well-structured refactoring that improves code quality and fixes visual bugs. The modifications are isolated to timeline hover interactions, use proper React patterns (local state and callbacks), and maintain backward compatibility with the component API
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/workspace/[workspaceId]/logs/components/trace-spans/components/trace-span-item.tsx	5/5	Refactored hover handling to use local state and improved timeline overflow styling; fixed hover line positioning from extending beyond timeline to constraining within bounds
apps/sim/app/workspace/[workspaceId]/logs/components/trace-spans/trace-spans.tsx	5/5	Simplified hover tracking by removing global window listener and hitbox ref; moved tooltip outside scrollable container for better positioning with Y-axis tracking

Sequence Diagram

sequenceDiagram
participant User
participant TraceSpans
participant TraceSpanItem
participant DOM
User->>TraceSpanItem: Hover over timeline
TraceSpanItem->>TraceSpanItem: onPointerMove event
TraceSpanItem->>TraceSpanItem: Calculate clamped percent
TraceSpanItem->>TraceSpanItem: setLocalHoveredPercent
TraceSpanItem->>TraceSpans: onTimelineHover(clientX, clientY, rect)
TraceSpans->>TraceSpans: Calculate workflow time & position
TraceSpans->>TraceSpans: setHoveredWorkflowMs, setHoveredX, setHoveredY
TraceSpans->>DOM: Render tooltip at calculated position
TraceSpanItem->>DOM: Render hover line at localHoveredPercent
User->>TraceSpanItem: Move pointer away
TraceSpanItem->>TraceSpanItem: onPointerLeave event
TraceSpanItem->>TraceSpanItem: setLocalHoveredPercent(null)
TraceSpanItem->>TraceSpans: onTimelineLeave()
TraceSpans->>TraceSpans: Clear hover states (null)
TraceSpans->>DOM: Remove tooltip
TraceSpanItem->>DOM: Remove hover line

Loading

[greptile-apps]

_{No files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}