From 425ba1fd36756643bd6107a920563baf7ccbb002 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Mon, 17 Feb 2025 23:23:20 +0800
Subject: [PATCH] Enhance modal styles and add scrollbar width calculation for
improved layout
---
static/css/components/modal.css | 6 ++++++
templates/loras.html | 12 ++++++++++++
2 files changed, 18 insertions(+)
diff --git a/static/css/components/modal.css b/static/css/components/modal.css
index 7269957a..5b58c4ec 100644
--- a/static/css/components/modal.css
+++ b/static/css/components/modal.css
@@ -9,11 +9,16 @@
background: rgba(0, 0, 0, 0.8);
z-index: var(--z-modal);
overflow-y: auto; /* 允许模态窗口内容滚动 */
+ -webkit-overflow-scrolling: touch; /* 为iOS设备提供平滑滚动 */
}
/* 当模态窗口打开时，禁止body滚动 */
body.modal-open {
overflow: hidden;
+ height: 100vh;
+ position: fixed;
+ width: 100%;
+ padding-right: var(--scrollbar-width, 0px); /* 补偿滚动条消失导致的页面偏移 */
}
.modal-content {
@@ -25,6 +30,7 @@ body.modal-open {
padding: var(--space-3);
border: 1px solid var(--lora-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ transform: translateZ(0); /* 创建新的堆叠上下文 */
}
/* Delete Modal specific styles */
diff --git a/templates/loras.html b/templates/loras.html
index d6fdd0a7..30976dad 100644
--- a/templates/loras.html
+++ b/templates/loras.html
@@ -32,6 +32,18 @@
+
+