fix: Fix span details showing incorrect span start info (#689)

Author: BYK

.changeset/many-coats-return.md

@@ -0,0 +1,8 @@
+---
+'@spotlightjs/spotlight': patch
+'@spotlightjs/electron': patch
+'@spotlightjs/overlay': patch
+'@spotlightjs/astro': patch
+---
+
+Fix span details showing incorrect span start time

packages/overlay/src/integrations/sentry/components/explore/traces/spans/SpanDetails.tsx

@@ -86,6 +86,7 @@ export default function SpanDetails({
   totalDuration: number;
 }) {
   const [spanNodeWidth, setSpanNodeWidth] = useState<number>(50);
+  const spanRelativeStart = span.start_timestamp - startTimestamp;
 
   const spanDuration = span.timestamp - span.start_timestamp;
 
@@ -115,15 +116,15 @@ export default function SpanDetails({
               <DateTime date={span.start_timestamp} />
               <span>&mdash;</span>
               <span>
-                <strong>{getFormattedDuration(spanDuration)}</strong> into trace
+                <strong>{getFormattedDuration(spanRelativeStart)}</strong> into trace
               </span>
             </div>
             <div className="flex-1">
               <div className="border-primary-800 relative h-8 border py-1">
                 <div
                   className="bg-primary-800 absolute bottom-0 top-0 -m-0.5 flex w-full items-center p-0.5"
                   style={{
-                    left: `min(${(spanDuration / totalDuration) * 100}%, 100% - 1px)`,
+                    left: `min(${(spanRelativeStart / totalDuration) * 100}%, 100% - 1px)`,
                     width: `max(1px, ${(spanDuration / totalDuration) * 100}%)`,
                   }}
                 >