resizing layouts

src/components/video-editor/VideoEditor.tsx

@@ -82,16 +82,18 @@ export default function VideoEditor() {
         <div className="flex flex-col gap-6 flex-1">
           {videoPath && (
             <>
-              <VideoPlayback
-                ref={videoPlaybackRef}
-                videoPath={videoPath}
-                isSeeking={isSeeking}
-                onDurationChange={setDuration}
-                onTimeUpdate={setCurrentTime}
-                onPlayStateChange={setIsPlaying}
-                onError={setError}
-                wallpaper={wallpaper}
-              />
+              <div className="flex justify-center w-full">
+                <VideoPlayback
+                  ref={videoPlaybackRef}
+                  videoPath={videoPath}
+                  isSeeking={isSeeking}
+                  onDurationChange={setDuration}
+                  onTimeUpdate={setCurrentTime}
+                  onPlayStateChange={setIsPlaying}
+                  onError={setError}
+                  wallpaper={wallpaper}
+                />
+              </div>
               <PlaybackControls
                 isPlaying={isPlaying}
                 currentTime={currentTime}

src/components/video-editor/VideoPlayback.tsx

@@ -119,8 +119,8 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(({
 
   return (
     <div
-      className="w-full aspect-video rounded-sm p-12 flex items-center justify-center overflow-hidden bg-cover bg-center"
-      style={backgroundStyle}
+      className="aspect-video rounded-sm p-12 flex items-center justify-center overflow-hidden bg-cover bg-center"
+      style={{ ...backgroundStyle, width: '90%' }}
     >
       <canvas
         ref={canvasRef}