fix(video-ios): 工作区视频预览改为固定比例容器防止布局被撑开

app/static/public/css/video.css

@@ -1066,32 +1066,54 @@ html[data-theme='dark'] .cache-video-item.is-active .cache-video-thumb-wrap {
   }
 
   .edit-preview-wrap {
-    height: min(52vh, 360px);
+    position: relative;
+    width: min(100%, 420px);
+    margin-left: auto;
+    margin-right: auto;
+    height: auto;
+    aspect-ratio: 9 / 16;
     max-height: min(52vh, 360px);
     display: flex;
     align-items: center;
     justify-content: center;
+    contain: layout paint style;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
   }
 
   #editVideo {
+    position: absolute;
+    inset: 0;
     width: 100%;
     height: 100%;
     max-height: min(52vh, 360px);
+    object-fit: contain;
   }
 
   .manual-merge-col .edit-preview-wrap {
-    height: min(40vh, 280px);
+    position: relative;
+    width: min(100%, 420px);
+    margin-left: auto;
+    margin-right: auto;
+    height: auto;
+    aspect-ratio: 9 / 16;
     max-height: min(40vh, 280px);
     display: flex;
     align-items: center;
     justify-content: center;
+    contain: layout paint style;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
   }
 
   #mergeVideoPreviewA,
   #mergeVideoPreviewB {
+    position: absolute;
+    inset: 0;
     width: 100%;
     height: 100%;
     max-height: min(40vh, 280px);
+    object-fit: contain;
   }
 
   .manual-merge-grid {

app/static/public/js/video.js

@@ -128,6 +128,9 @@
     videoEl.setAttribute('playsinline', '');
     videoEl.setAttribute('webkit-playsinline', '');
     videoEl.setAttribute('x5-playsinline', 'true');
+    videoEl.style.objectFit = 'contain';
+    videoEl.style.maxWidth = '100%';
+    videoEl.style.maxHeight = '100%';
   }
 
   function shortHash(value) {