diff options
| -rw-r--r-- | apps/web/src/components/editor/timeline.tsx | 6 | ||||
| -rw-r--r-- | 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 bec5ec05..01f84d71 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 dc2295b6..26cd865c 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 |