From 418809669cfa63730e46442051587e60ac47ad20 Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@agent>
Date: Sat, 3 Oct 2026 14:53:09 +0800
Subject: [PATCH] fix(viral-video): modal footer buttons pinned to bottom; body
 scrolls

- Fix modal CSS: move overlay styles to .vv-modal-mask; .vv-modal becomes the white dialog card with flex column layout (head/body/foot)
- Add .vv-modal-head (title + close), .vv-modal-title, .vv-modal-foot (fixed bottom action bar with right-aligned buttons, top separator)
- .vv-modal-body is now flex:1 with overflow-y:auto, scrolls independently
- .vv-modal-foot buttons auto-width, consistent padding; remove inline style overrides
- PresetVoicePickerModal benefits from the same fix (same class structure)
- tsc & vite build pass
---
 .../src/pages/viral-video/ViralVideoPage.css  | 57 ++++++++++++++++---
 .../components/AssetPickerModal.tsx           |  3 +-
 2 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/pages/viral-video/ViralVideoPage.css b/apps/web/src/pages/viral-video/ViralVideoPage.css
index 9083c51d3..c2a770d1a 100644
--- a/apps/web/src/pages/viral-video/ViralVideoPage.css
+++ b/apps/web/src/pages/viral-video/ViralVideoPage.css
@@ -1502,7 +1502,7 @@
 }
 
 /* ── Asset/voice picker modal styles (in page) ───────────── */
-.vv-modal {
+.vv-modal-mask {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.45);
@@ -1512,21 +1512,59 @@
   justify-content: center;
   padding: 20px;
 }
-.vv-modal-body {
+.vv-modal {
   background: #fff;
   border: 1px solid #e5e7eb;
   border-radius: 12px;
   max-width: 720px;
   width: 100%;
   max-height: 80vh;
-  overflow-y: auto;
-  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   position: relative;
+  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
+}
+.vv-modal.vv-modal-lg {
+  max-width: 860px;
+}
+.vv-modal-head {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 20px;
+  border-bottom: 1px solid #e5e7eb;
+}
+.vv-modal-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1f2937;
+}
+.vv-modal-body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 16px 20px;
+  min-height: 0;
+}
+.vv-modal-foot {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 12px 20px;
+  border-top: 1px solid #e5e7eb;
+  background: #fff;
+}
+.vv-modal-foot .vv-btn-primary {
+  width: auto;
+  padding: 8px 18px;
+}
+.vv-modal-foot .vv-btn-ghost {
+  padding: 8px 18px;
 }
 .vv-modal-close {
-  position: absolute;
-  top: 14px;
-  right: 14px;
   background: transparent;
   border: none;
   color: #6b7280;
@@ -1535,6 +1573,11 @@
   width: 28px;
   height: 28px;
   border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  line-height: 1;
 }
 .vv-modal-close:hover {
   color: #ef4444;
diff --git a/apps/web/src/pages/viral-video/components/AssetPickerModal.tsx b/apps/web/src/pages/viral-video/components/AssetPickerModal.tsx
index ffba79c3a..bdc3df23b 100644
--- a/apps/web/src/pages/viral-video/components/AssetPickerModal.tsx
+++ b/apps/web/src/pages/viral-video/components/AssetPickerModal.tsx
@@ -245,12 +245,11 @@ export default function AssetPickerModal({
         </div>
         {multiple && (
           <div className="vv-modal-foot">
-            <button className="vv-btn vv-btn-ghost vv-btn-sm" onClick={onClose}>
+            <button className="vv-btn vv-btn-ghost" onClick={onClose}>
               取消
             </button>
             <button
               className="vv-btn vv-btn-primary"
-              style={{ width: "auto", marginTop: 0, padding: "8px 18px" }}
               onClick={handleConfirm}
               disabled={picked.size === 0}
             >
-- 
2.54.0