From ebc4196071e3053d046d14648db6339c68822f73 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Wed, 19 Feb 2025 13:32:57 +0800
Subject: [PATCH] Enhance modal styles and add scrollbar width variable

---
 static/css/base.css              |  2 ++
 static/css/components/modal.css  | 19 +++++++++++++------
 static/js/components/LoraCard.js | 12 +-----------
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/static/css/base.css b/static/css/base.css
index 448f696a..2d305567 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -50,6 +50,8 @@ html {
     --border-radius-base: 12px;
     --border-radius-sm: 8px;
     --border-radius-xs: 4px;
+
+    --scrollbar-width: 8px; /* 添加滚动条宽度变量 */
 }
 
 [data-theme="dark"] {
diff --git a/static/css/components/modal.css b/static/css/components/modal.css
index e4967f78..e99b9202 100644
--- a/static/css/components/modal.css
+++ b/static/css/components/modal.css
@@ -1,4 +1,4 @@
-/* 模态窗口样式 */
+/* 修改 modal 基础样式 */
 .modal {
     display: none;
     position: fixed;
@@ -8,8 +8,7 @@
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
     z-index: var(--z-modal);
-    overflow-y: auto;  /* 允许模态窗口内容滚动 */
-    -webkit-overflow-scrolling: touch; /* 为iOS设备提供平滑滚动 */
+    overflow: hidden; /* 改为 hidden，防止双滚动条 */
 }
 
 /* 当模态窗口打开时，禁止body滚动 */
@@ -19,18 +18,26 @@ body.modal-open {
     padding-right: var(--scrollbar-width, 0px); /* 补偿滚动条消失导致的页面偏移 */
 }
 
+/* 修改 modal-content 样式 */
 .modal-content {
     position: relative;
     max-width: 800px;
+    height: auto;
+    max-height: 90vh;
     margin: 2rem auto;
     background: var(--lora-surface);
     border-radius: var(--border-radius-base);
     padding: var(--space-3);
     border: 1px solid var(--lora-border);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-    transform: translateZ(0); /* 创建新的堆叠上下文 */
-    max-height: 90vh; /* 限制最大高度为视窗高度的90% */
-    overflow-y: auto; /* 添加垂直滚动条 */
+    overflow-y: auto;
+    overflow-x: hidden; /* 防止水平滚动条 */
+}
+
+/* 当 modal 打开时锁定 body */
+body.modal-open {
+    overflow: hidden !important; /* 覆盖 base.css 中的 scroll */
+    padding-right: var(--scrollbar-width, 8px); /* 使用滚动条宽度作为补偿 */
 }
 
 /* Delete Modal specific styles */
diff --git a/static/js/components/LoraCard.js b/static/js/components/LoraCard.js
index 8229e6b1..c3a17738 100644
--- a/static/js/components/LoraCard.js
+++ b/static/js/components/LoraCard.js
@@ -113,16 +113,6 @@ export function showLoraModal(lora) {
             <button class="close" onclick="modalManager.closeModal('loraModal')">&times;</button>
             <header class="modal-header">
                 <h2>${lora.model_name}</h2>
-                <div class="modal-actions">
-                    ${lora.from_civitai ? 
-                        `<button class="fetch-btn" title="Refresh metadata from Civitai">
-                            <i class="fas fa-sync-alt"></i>
-                        </button>` : 
-                        `<button class="fetch-btn" title="Fetch from Civitai">
-                            <i class="fas fa-cloud-download-alt"></i>
-                        </button>`
-                    }
-                </div>
             </header>
 
             <div class="modal-body">
@@ -391,7 +381,7 @@ export function setupShowcaseScroll() {
                 event.preventDefault();
             }
         }
-    });
+    }, { passive: false }); // Add passive: false option here
 
     // Keep the existing scroll tracking code
     const modalContent = document.querySelector('.modal-content');