更新工作流组件，调整视频元素的宽度设置，优化样式以提升布局效果。

components/pages/style/work-flow.css

@@ -165,6 +165,7 @@
   min-height: 0;
   display: flex;
   position: relative;
+  justify-content: center;
 }
 .heroVideo-FIzuK1 {
   object-fit: cover;

components/pages/work-flow/media-viewer.tsx

@@ -149,7 +149,7 @@ export const MediaViewer = React.memo(function MediaViewer({
     return (
       <video
         ref={finalVideoRef}
-        className="w-full h-full object-cover rounded-lg"
+        className="w-[auto] h-full object-cover rounded-lg"
         src={taskObject.final.url}
         autoPlay={isFinalVideoPlaying}
         loop
@@ -317,7 +317,7 @@ export const MediaViewer = React.memo(function MediaViewer({
             transition={{ duration: 0.8, ease: "easeInOut" }}
           >
             <video
-              className="w-full h-full rounded-lg object-cover object-center"
+              className="w-[auto] h-full rounded-lg object-cover object-center"
               src={taskObject.final.url}
               loop
               playsInline

components/ui/replace-panel.tsx

@@ -163,7 +163,7 @@ export function ReplacePanel({
                   ref={el => {
                     if (el) videoRefs.current[shot.id] = el;
                   }}
-                  src={shot.videoUrl[0].video_url}
+                  src={shot.videoUrl[0]}
                   className="w-full h-full object-cover"
                   loop
                   muted

components/ui/shot-editor/ShotsEditor.tsx

@@ -45,7 +45,7 @@ interface ShotsEditorProps {
   style?: React.CSSProperties;
 }
 
-export const ShotsEditor = forwardRef<any, ShotsEditorProps>(({ roles, shotInfo, style }, ref) => {
+export const ShotsEditor = forwardRef<any, ShotsEditorProps>(function ShotsEditor({ roles, shotInfo, style }, ref) {
   const [currentShotIndex, setCurrentShotIndex] = useState(0);
   const [shots, setShots] = useState<Shot[]>([]);
   const descEditorRef = useRef<any>(null);