From fae9434597360b2598f84993d4dbb315528a4dd1 Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Tue, 19 May 2026 10:06:18 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=AD=97=E6=AE=B5?=
 =?UTF-8?q?=E6=98=A0=E5=B0=84=E5=8C=BA=E5=9F=9F=E6=BB=9A=E5=8A=A8=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/project_context.md |  2 +-
 frontend/src/styles.css | 21 +++++++++++++++------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/docs/project_context.md b/docs/project_context.md
index 5ba57c4..f01fb4a 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -3,7 +3,7 @@
 ## 2026-05-19：压缩系统设置页布局高度
 
 - `frontend/src/styles.css` 调整系统设置页为固定高度布局，外层 `settings-workspace` 减小 padding 并隐藏溢出，避免主内容区出现整页滚动条。
-- 字段映射配置卡片高度限制为约 520px，内容改为原生内部滚动区域浏览，避免规则映射页被字段列表撑高或内容溢出卡片。
+- 字段映射配置卡片在规则映射页中占满可用高度，卡片内容区使用 flex 固定 header/footer，字段列表通过内部纵向滚动条浏览，避免主页面滚动或内容溢出。
 
 ## 2026-05-19：拆分系统设置页并支持远程源文件自动清理
 
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 690efec..25055ae 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1239,6 +1239,8 @@ select {
 
 .settings-rules-grid {
   grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.4fr);
+  grid-template-rows: minmax(0, 1fr);
+  align-items: stretch;
   height: 100%;
   min-height: 0;
   overflow: hidden;
@@ -1271,8 +1273,8 @@ select {
 }
 
 .field-mapping-card {
-  display: flex;
-  height: min(520px, calc(100vh - 250px));
+  display: flex !important;
+  height: 100%;
   min-height: 0;
   min-width: 0;
   flex-direction: column;
@@ -1292,7 +1294,10 @@ select {
 }
 
 .field-mapping-card > .n-card__content {
-  flex: 1 1 auto;
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  height: 0;
   min-height: 0;
   max-height: none;
   padding: 12px 16px;
@@ -1349,13 +1354,16 @@ select {
 .field-mapping-scroll {
   display: flex;
   flex: 1 1 auto;
-  height: 100%;
+  height: auto;
   max-height: none;
   min-height: 0;
   flex-direction: column;
   gap: 12px;
   padding: 0 4px 4px 0;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  scrollbar-color: var(--td-scrollbar-color) transparent;
+  scrollbar-width: thin;
 }
 
 .field-mapping-scroll::-webkit-scrollbar {
@@ -1596,7 +1604,8 @@ select {
   }
 
   .field-mapping-card {
-    height: 520px;
+    height: 100%;
+    min-height: 520px;
   }
 }