fix(crons): Fix MockCheckInTimeline positioning to match real timeline behavior (#103264)

The mock timeline was calculating positions incorrectly, causing
misalignment with the grid lines. This fix makes it match how the real
CheckInTimeline positions ticks.

Key changes:
1. Use `periodStart` instead of `start` (which is underscanStart) as the
   base  timestamp calculations
2. Add `startOffset` (underscanWidth) to all positions to account for
   the underscan area on the left
3. Use `elapsedMinutes` from the config for consistency with grid
   calculations
4. Use `timelineWidth` which excludes the underscan width

This matches the positioning logic in mergeBuckets where ticks are
positioned relative to the usable timeline area, not the full container width.

Author: evanpurkhiser

static/app/components/checkInTimeline/checkInTimeline.tsx

@@ -44,15 +44,6 @@ interface CheckInTimelineProps<Status extends string>
   makeUnit?: (count: number) => React.ReactNode;
 }
 
-function getBucketedCheckInsPosition(
-  timestamp: number,
-  timelineStart: Date,
-  msPerPixel: number
-) {
-  const elapsedSinceStart = new Date(timestamp).getTime() - timelineStart.getTime();
-  return elapsedSinceStart / msPerPixel;
-}
-
 export function CheckInTimeline<Status extends string>({
   bucketedData,
   timeWindowConfig,
@@ -109,21 +100,31 @@ interface MockCheckInTimelineProps<Status extends string>
   status: Status;
 }
 
+function getBucketedCheckInsPosition(
+  timestamp: number,
+  timelineStart: Date,
+  msPerPixel: number
+) {
+  const elapsedSinceStart = new Date(timestamp).getTime() - timelineStart.getTime();
+  return elapsedSinceStart / msPerPixel;
+}
+
 export function MockCheckInTimeline<Status extends string>({
   mockTimestamps,
   timeWindowConfig,
   status,
   statusStyle,
 }: MockCheckInTimelineProps<Status>) {
-  const {start, end} = timeWindowConfig;
-  const elapsedMs = end.getTime() - start.getTime();
-  const msPerPixel = elapsedMs / timeWindowConfig.timelineWidth;
+  const {periodStart, elapsedMinutes, timelineWidth, rollupConfig} = timeWindowConfig;
+  const msPerPixel = (elapsedMinutes * 60 * 1000) / timelineWidth;
+  const startOffset = rollupConfig.timelineUnderscanWidth;
 
   return (
     <TimelineContainer>
       {mockTimestamps.map(ts => {
         const timestampMs = ts.getTime();
-        const left = getBucketedCheckInsPosition(timestampMs, start, msPerPixel);
+        const left =
+          startOffset + getBucketedCheckInsPosition(timestampMs, periodStart, msPerPixel);
 
         return (
           <Tooltip

static/app/components/checkInTimeline/types.tsx

@@ -90,7 +90,8 @@ export interface TimeWindowConfig {
   start: Date;
   /**
    * The width in pixels of the timeline. This value is clamped such that there
-   * may be some underscan. See the RollupConfig for more details.
+   * may be some underscan, this value does not include the width of the
+   * underscan. See the RollupConfig for more details.
    */
   timelineWidth: number;
 }