fix: preview image scaling

2 files changed, 10 insertions, 4 deletions

diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 926bee8d..1cc9d976 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -202,7 +202,10 @@ export function PreviewPanel() {
       // Video elements
       if (mediaItem.type === "video") {
         return (
-          <div key={element.id} className="absolute inset-0">
+          <div
+            key={element.id}
+            className="absolute inset-0 flex items-center justify-center"
+          >
             <VideoPlayer
               src={mediaItem.url!}
               poster={mediaItem.thumbnailUrl}
@@ -218,11 +221,14 @@ export function PreviewPanel() {
       // Image elements
       if (mediaItem.type === "image") {
         return (
-          <div key={element.id} className="absolute inset-0">
+          <div
+            key={element.id}
+            className="absolute inset-0 flex items-center justify-center"
+          >
             <img
               src={mediaItem.url!}
               alt={mediaItem.name}
-              className="w-full h-full object-cover"
+              className="max-w-full max-h-full object-contain"
               draggable={false}
             />
           </div>
diff --git a/apps/web/src/components/ui/video-player.tsx b/apps/web/src/components/ui/video-player.tsx
index d8a72e40..29d82cdf 100644
--- a/apps/web/src/components/ui/video-player.tsx
+++ b/apps/web/src/components/ui/video-player.tsx
@@ -118,7 +118,7 @@ export function VideoPlayer({
       ref={videoRef}
       src={src}
       poster={poster}
-      className={`w-full h-full object-cover ${className}`}
+      className={`max-w-full max-h-full object-contain ${className}`}
       playsInline
       preload="auto"
       controls={false}