improve lots of stuff around the editor

apps/web/src/components/editor/preview-panel.tsx

@@ -18,6 +18,9 @@ export function PreviewPanel() {
     ? mediaItems.find((item) => item.id === firstClip.mediaId)
     : null;
 
+  // Calculate dynamic aspect ratio - default to 16:9 if no media
+  const aspectRatio = firstMediaItem?.aspectRatio || 16 / 9;
+
   const renderPreviewContent = () => {
     if (!firstMediaItem) {
       return (
@@ -32,7 +35,7 @@ export function PreviewPanel() {
         <ImageTimelineTreatment
           src={firstMediaItem.url}
           alt={firstMediaItem.name}
-          targetAspectRatio={16 / 9}
+          targetAspectRatio={aspectRatio}
           className="w-full h-full rounded-lg"
           backgroundType="blur"
         />
@@ -68,8 +71,17 @@ export function PreviewPanel() {
   };
 
   return (
-    <div className="h-full flex flex-col items-center justify-center p-4">
-      <div className="aspect-video bg-black/90 w-full max-w-4xl rounded-lg shadow-lg relative group overflow-hidden">
+    <div className="h-full flex flex-col items-center justify-center p-4 overflow-hidden">
+      <div
+        className="bg-black/90 rounded-lg shadow-lg relative group overflow-hidden flex-shrink"
+        style={{
+          aspectRatio: aspectRatio.toString(),
+          width: aspectRatio > 1 ? "100%" : "auto",
+          height: aspectRatio <= 1 ? "100%" : "auto",
+          maxWidth: "100%",
+          maxHeight: "100%",
+        }}
+      >
         {renderPreviewContent()}
 
         {/* Playback Controls Overlay */}
@@ -103,6 +115,16 @@ export function PreviewPanel() {
             Preview: {firstMediaItem.name}
             {firstMediaItem.type === "image" &&
               " (with CapCut-style treatment)"}
+            <br />
+            <span className="text-xs text-muted-foreground/70">
+              Aspect Ratio: {aspectRatio.toFixed(2)} (
+              {aspectRatio > 1
+                ? "Landscape"
+                : aspectRatio < 1
+                  ? "Portrait"
+                  : "Square"}
+              )
+            </span>
           </p>
         </div>
       )}

apps/web/src/components/editor/timeline.tsx

@@ -472,19 +472,12 @@ function TimelineTrackComponent({ track }: { track: TimelineTrack }) {
 
     if (mediaItem.type === "image") {
       return (
-        <div className="w-full h-full flex items-center gap-2">
-          <div className="w-16 h-12 flex-shrink-0">
-            <ImageTimelineTreatment
-              src={mediaItem.url}
-              alt={mediaItem.name}
-              targetAspectRatio={16 / 9}
-              className="rounded-sm"
-              backgroundType="mirror"
-            />
-          </div>
-          <span className="text-xs text-foreground/80 truncate flex-1">
-            {clip.name}
-          </span>
+        <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"
+          />
         </div>
       );
     }
@@ -536,9 +529,9 @@ function TimelineTrackComponent({ track }: { track: TimelineTrack }) {
             track.clips.map((clip, index) => (
               <div
                 key={clip.id}
-                className={`timeline-clip h-full rounded-sm border cursor-grab active:cursor-grabbing transition-colors ${getTrackColor(track.type)} flex items-center px-2 min-w-[80px] overflow-hidden`}
+                className={`timeline-clip h-full rounded-sm border cursor-grab active:cursor-grabbing transition-colors ${getTrackColor(track.type)} flex items-center py-3 min-w-[80px] overflow-hidden`}
                 style={{
-                  width: `${Math.max(80, (clip.duration / 30) * 400)}px`,
+                  width: `${Math.max(80, clip.duration * 50)}px`,
                 }}
                 draggable={true}
                 onDragStart={(e) => handleClipDragStart(e, clip)}