2 files changed, 22 insertions, 17 deletions

diff --git a/apps/web/src/components/editor/timeline-element.tsx b/apps/web/src/components/editor/timeline-element.tsx
index 0d258607..65126379 100644
--- a/apps/web/src/components/editor/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline-element.tsx
@@ -173,8 +173,7 @@ export function TimelineElement({
   const renderElementContent = () => {
     if (element.type === "text") {
       return (
-        <div className="w-full h-full flex items-center justify-center px-2">
-          <Type className="h-4 w-4 mr-2 text-purple-400 flex-shrink-0" />
+        <div className="w-full h-full flex items-center justify-center">
           <span className="text-xs text-foreground/80 truncate">
             {element.content}
           </span>
@@ -195,12 +194,14 @@ export function TimelineElement({
     if (mediaItem.type === "image") {
       return (
         <div className="w-full h-full flex items-center justify-center">
-          <img
-            src={mediaItem.url}
-            alt={mediaItem.name}
-            className="w-full h-full object-cover"
-            draggable={false}
-          />
+          <div className="bg-[#004D52] py-3 w-full h-full">
+            <img
+              src={mediaItem.url}
+              alt={mediaItem.name}
+              className="w-full h-full object-cover"
+              draggable={false}
+            />
+          </div>
         </div>
       );
     }
@@ -276,7 +277,7 @@ export function TimelineElement({
           onElementMouseDown && onElementMouseDown(e, element)
         }
       >
-        <div className="absolute inset-1 flex items-center p-1">
+        <div className="absolute inset-0 flex items-center h-full">
           {renderElementContent()}
         </div>
 
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 6a94ed60..f7208224 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -46,6 +46,9 @@ import { TimelineTrackContent } from "./timeline-track";
 import type { DragData } from "@/types/timeline";
 import {
   getTrackLabelColor,
+  getTrackHeight,
+  getCumulativeHeightBefore,
+  getTotalTracksHeight,
   TIMELINE_CONSTANTS,
 } from "@/lib/timeline-constants";
 
@@ -242,9 +245,9 @@ export function Timeline() {
       track.elements.forEach((element) => {
         const clipLeft =
           element.startTime * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-        const clipTop = trackIdx * TIMELINE_CONSTANTS.TRACK_HEIGHT;
-        const clipBottom = clipTop + TIMELINE_CONSTANTS.TRACK_HEIGHT;
-        const clipRight = clipLeft + TIMELINE_CONSTANTS.TRACK_HEIGHT;
+        const clipTop = getCumulativeHeightBefore(tracks, trackIdx);
+        const clipBottom = clipTop + getTrackHeight(track.type);
+        const clipRight = clipLeft + getTrackHeight(track.type);
         if (
           bx1 < clipRight &&
           bx2 > clipLeft &&
@@ -1021,7 +1024,8 @@ export function Timeline() {
                 {tracks.map((track) => (
                   <div
                     key={track.id}
-                    className="h-[60px] flex items-center px-3 border-b border-muted/30 bg-background group"
+                    className="flex items-center px-3 border-b border-muted/30 bg-background group"
+                    style={{ height: `${getTrackHeight(track.type)}px` }}
                   >
                     <div className="flex items-center flex-1 min-w-0">
                       <div
@@ -1048,7 +1052,7 @@ export function Timeline() {
               <div
                 className="relative flex-1"
                 style={{
-                  height: `${Math.max(200, Math.min(800, tracks.length * TIMELINE_CONSTANTS.TRACK_HEIGHT))}px`,
+                  height: `${Math.max(200, Math.min(800, getTotalTracksHeight(tracks)))}px`,
                   width: `${dynamicTimelineWidth}px`,
                 }}
                 onClick={handleTimelineClick}
@@ -1064,8 +1068,8 @@ export function Timeline() {
                           <div
                             className="absolute left-0 right-0 border-b border-muted/30"
                             style={{
-                              top: `${index * TIMELINE_CONSTANTS.TRACK_HEIGHT}px`,
-                              height: `${TIMELINE_CONSTANTS.TRACK_HEIGHT}px`,
+                              top: `${getCumulativeHeightBefore(tracks, index)}px`,
+                              height: `${getTrackHeight(track.type)}px`,
                             }}
                             onClick={(e) => {
                               // If clicking empty area (not on a element), deselect all elements
@@ -1098,7 +1102,7 @@ export function Timeline() {
                         className="absolute top-0 w-0.5 bg-red-500 pointer-events-auto z-50 cursor-col"
                         style={{
                           left: `${playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,
-                          height: `${tracks.length * TIMELINE_CONSTANTS.TRACK_HEIGHT}px`,
+                          height: `${getTotalTracksHeight(tracks)}px`,
                         }}
                         onMouseDown={handlePlayheadMouseDown}
                       />