feat(scheduled-tasks): Google-Calendar-style side-by-side overlap layout

Tasks whose pills would collide now split the column into side-by-side lanes
(like Google Calendar) instead of stacking on top of each other; tasks that
don't overlap keep the full width. Adds a pure layoutColumn lane-assignment
helper (interval clustering + greedy lane packing) with tests.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/schedule-calendar/components/time-grid/time-grid.tsx

@@ -7,8 +7,10 @@ import { cn } from '@/lib/core/utils/cn'
 import { CalendarEventChip } from '@/app/workspace/[workspaceId]/scheduled-tasks/components/schedule-calendar/components/calendar-event-chip'
 import {
   type CalendarDayCell,
+  EVENT_CHIP_HEIGHT,
   formatHourLabel,
   formatSlotTime,
+  layoutColumn,
   TIME_SLOT_HEIGHT,
   timeToOffset,
 } from '@/app/workspace/[workspaceId]/scheduled-tasks/utils/calendar-grid'
@@ -106,24 +108,30 @@ function DayEvents({
   onSelectTask: (task: ScheduledTask) => void
   onTaskContextMenu: (task: ScheduledTask, e: React.MouseEvent) => void
 }) {
+  const placed = layoutColumn(events, EVENT_CHIP_HEIGHT)
   return (
     <div
       className={cn(
         'pointer-events-none absolute inset-y-0 left-0.5 z-10',
         isLastColumn ? 'right-6' : 'right-0.5'
       )}
     >
-      {events.map((event) => (
+      {placed.map(({ item: event, topPx, lane, lanes }) => (
         <div
           key={event.id}
-          style={{ top: timeToOffset(event.start) }}
-          className='pointer-events-auto absolute inset-x-0'
+          style={{
+            top: topPx,
+            height: EVENT_CHIP_HEIGHT,
+            left: `${(lane / lanes) * 100}%`,
+            width: `${(1 / lanes) * 100}%`,
+          }}
+          className='pointer-events-auto absolute pr-0.5'
         >
           <CalendarEventChip
             event={event}
             onSelect={onSelectTask}
             onContextMenu={onTaskContextMenu}
-            className='w-full'
+            className='h-full w-full'
           />
         </div>
       ))}

apps/sim/app/workspace/[workspaceId]/scheduled-tasks/utils/calendar-grid.test.ts

@@ -5,10 +5,12 @@ import { describe, expect, it } from 'vitest'
 import {
   advanceAnchor,
   buildCalendarGrid,
+  EVENT_CHIP_HEIGHT,
   formatHourLabel,
   formatScopeLabel,
   formatSlotTime,
   HOURS,
+  layoutColumn,
   TIME_SLOT_HEIGHT,
   timeToOffset,
   WEEKDAY_LABELS,
@@ -94,3 +96,39 @@ describe('timeToOffset', () => {
     expect(timeToOffset(new Date(2026, 5, 10, 23, 0))).toBe(23 * TIME_SLOT_HEIGHT)
   })
 })
+
+describe('layoutColumn', () => {
+  const at = (h: number, m: number) => ({ start: new Date(2026, 5, 15, h, m) })
+
+  it('keeps non-overlapping events full width in a single lane', () => {
+    const placed = layoutColumn([at(9, 0), at(11, 0)], EVENT_CHIP_HEIGHT)
+    expect(placed.map((p) => ({ lane: p.lane, lanes: p.lanes }))).toEqual([
+      { lane: 0, lanes: 1 },
+      { lane: 0, lanes: 1 },
+    ])
+  })
+
+  it('splits overlapping events into side-by-side lanes', () => {
+    // 9:00 and 9:10 are ~8px apart — within the 22px pill height, so they overlap.
+    const placed = layoutColumn([at(9, 0), at(9, 10)], EVENT_CHIP_HEIGHT)
+    expect(placed.map((p) => ({ lane: p.lane, lanes: p.lanes }))).toEqual([
+      { lane: 0, lanes: 2 },
+      { lane: 1, lanes: 2 },
+    ])
+  })
+
+  it('reuses a freed lane after the overlap clears and resets the cluster', () => {
+    const placed = layoutColumn([at(9, 0), at(9, 10), at(12, 0)], EVENT_CHIP_HEIGHT)
+    expect(placed.map((p) => ({ lane: p.lane, lanes: p.lanes }))).toEqual([
+      { lane: 0, lanes: 2 },
+      { lane: 1, lanes: 2 },
+      { lane: 0, lanes: 1 },
+    ])
+  })
+
+  it('sorts by start time before assigning lanes', () => {
+    const placed = layoutColumn([at(9, 10), at(9, 0)], EVENT_CHIP_HEIGHT)
+    expect(placed[0].item).toEqual(at(9, 0))
+    expect(placed[1].item).toEqual(at(9, 10))
+  })
+})

apps/sim/app/workspace/[workspaceId]/scheduled-tasks/utils/calendar-grid.ts

@@ -54,6 +54,9 @@ export const HOURS: number[] = Array.from({ length: 24 }, (_, hour) => hour)
 /** Fixed pixel height of one hour row in the time grid. */
 export const TIME_SLOT_HEIGHT = 48
 
+/** Rendered height of a task pill in the time grid, used for overlap detection. */
+export const EVENT_CHIP_HEIGHT = 22
+
 const BASE_WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as const
 
 /** Weekday header labels rotated to honor {@link WEEK_STARTS_ON}. */
@@ -170,3 +173,55 @@ export function timeToOffset(date: Date): number {
 export function formatSlotTime(hour: number): string {
   return `${hour.toString().padStart(2, '0')}:00`
 }
+
+/** A time-grid item placed at its minute, with its column slot within an overlap cluster. */
+export interface PlacedEvent<T> {
+  item: T
+  /** Pixel offset from the top of the day column. */
+  topPx: number
+  /** 0-based column index within the overlap cluster. */
+  lane: number
+  /** Total columns the overlap cluster spans (1 when nothing overlaps). */
+  lanes: number
+}
+
+/**
+ * Google-Calendar-style lane assignment for events sharing a day column. Items
+ * whose pill rectangles (`[topPx, topPx + chipHeight]`) intersect form a cluster
+ * and split the width into side-by-side lanes; non-overlapping items keep the
+ * full width. Pure: positions come from {@link timeToOffset}.
+ */
+export function layoutColumn<T extends { start: Date }>(
+  items: T[],
+  chipHeight: number
+): PlacedEvent<T>[] {
+  const sorted = [...items].sort((a, b) => a.start.getTime() - b.start.getTime())
+  const placed: PlacedEvent<T>[] = []
+  let cluster: PlacedEvent<T>[] = []
+  let laneBottoms: number[] = []
+
+  const closeCluster = () => {
+    for (const entry of cluster) entry.lanes = laneBottoms.length
+    cluster = []
+    laneBottoms = []
+  }
+
+  for (const item of sorted) {
+    const topPx = timeToOffset(item.start)
+    if (laneBottoms.length > 0 && laneBottoms.every((bottom) => topPx >= bottom)) {
+      closeCluster()
+    }
+    let lane = laneBottoms.findIndex((bottom) => topPx >= bottom)
+    if (lane === -1) {
+      lane = laneBottoms.length
+      laneBottoms.push(topPx + chipHeight)
+    } else {
+      laneBottoms[lane] = topPx + chipHeight
+    }
+    const entry: PlacedEvent<T> = { item, topPx, lane, lanes: 1 }
+    cluster.push(entry)
+    placed.push(entry)
+  }
+  closeCluster()
+  return placed
+}