From 059a4f4205a50841bdc8b33c940a9a88828d5f50 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 9 Jul 2025 22:31:45 +0200
Subject: [PATCH] style: timeline tracks

---
 apps/web/src/components/editor/timeline.tsx |  6 +++---
 apps/web/src/lib/timeline-constants.ts      | 11 +++++++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index bec5ec0..01f84d7 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -999,11 +999,11 @@ export function Timeline() {
           {/* Track Labels */}
           {tracks.length > 0 && (
             <div className="w-48 flex-shrink-0 border-r bg-panel-accent overflow-y-auto">
-              <div className="flex flex-col">
+              <div className="flex flex-col gap-1">
                 {tracks.map((track) => (
                   <div
                     key={track.id}
-                    className="flex items-center px-3 border-b border-muted/30 group"
+                    className="flex items-center px-3 border-b border-muted/30 group bg-foreground/5"
                     style={{ height: `${getTrackHeight(track.type)}px` }}
                   >
                     <div className="flex items-center flex-1 min-w-0">
@@ -1043,7 +1043,7 @@ export function Timeline() {
                       <ContextMenu key={track.id}>
                         <ContextMenuTrigger asChild>
                           <div
-                            className="absolute left-0 right-0 border-b border-muted/30"
+                            className="absolute left-0 right-0 border-b border-muted/30 py-[0.05rem]"
                             style={{
                               top: `${getCumulativeHeightBefore(tracks, index)}px`,
                               height: `${getTrackHeight(track.type)}px`,
diff --git a/apps/web/src/lib/timeline-constants.ts b/apps/web/src/lib/timeline-constants.ts
index dc2295b..26cd865 100644
--- a/apps/web/src/lib/timeline-constants.ts
+++ b/apps/web/src/lib/timeline-constants.ts
@@ -49,16 +49,23 @@ export function getCumulativeHeightBefore(
   tracks: Array<{ type: TrackType }>,
   trackIndex: number
 ): number {
+  const GAP = 4; // 4px gap between tracks (equivalent to Tailwind's gap-1)
   return tracks
     .slice(0, trackIndex)
-    .reduce((sum, track) => sum + getTrackHeight(track.type), 0);
+    .reduce((sum, track) => sum + getTrackHeight(track.type) + GAP, 0);
 }
 
 // Calculate total height of all tracks
 export function getTotalTracksHeight(
   tracks: Array<{ type: TrackType }>
 ): number {
-  return tracks.reduce((sum, track) => sum + getTrackHeight(track.type), 0);
+  const GAP = 4; // 4px gap between tracks (equivalent to Tailwind's gap-1)
+  const tracksHeight = tracks.reduce(
+    (sum, track) => sum + getTrackHeight(track.type),
+    0
+  );
+  const gapsHeight = Math.max(0, tracks.length - 1) * GAP; // n-1 gaps for n tracks
+  return tracksHeight + gapsHeight;
 }
 
 // Other timeline constants