From ed6fb37ec360cb07dc3c71accf3477f5ed38b2ff Mon Sep 17 00:00:00 2001
From: sky121113 <sky121113@gmail.com>
Date: Mon, 19 Jan 2026 15:42:55 +0800
Subject: [PATCH] =?UTF-8?q?docs(skill):=20=E6=9B=B4=E6=96=B0=20UI=20?=
 =?UTF-8?q?=E7=B5=B1=E4=B8=80=E8=A6=8F=E7=AF=84=EF=BC=8C=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=B0=8D=E8=A9=B1=E6=A1=86=E6=BB=BE=E5=8B=95=E8=A6=8F=E5=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .agent/skills/ui-consistency/SKILL.md | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/.agent/skills/ui-consistency/SKILL.md b/.agent/skills/ui-consistency/SKILL.md
index 11b3959..47440d8 100644
--- a/.agent/skills/ui-consistency/SKILL.md
+++ b/.agent/skills/ui-consistency/SKILL.md
@@ -706,6 +706,32 @@ import { SearchableSelect } from "@/Components/ui/searchable-select";
 
 ---
 
+## 11.4 對話框 (Dialog) 滾動與佈局
+
+當對話框內容可能超出螢幕高度時（如長表單或詳細資料），**請勿使用 `ScrollArea`**，應直接在 `DialogContent` 使用原生的 `overflow-y-auto`。
+
+**原因**：`ScrollArea` 在 Flex 佈局計算高度時容易失效或導致雙重滾動條。以及與原生捲動行為不一致。
+
+```tsx
+// ❌ 錯誤：使用 ScrollArea 或固定高度計算
+<DialogContent className="max-w-3xl">
+  <ScrollArea className="h-[500px]">
+    {/* 內容 */}
+  </ScrollArea>
+</DialogContent>
+
+// ✅ 正確：直接使用 overflow-y-auto 與 max-h
+<DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+  <DialogHeader>...</DialogHeader>
+  <form className="p-6">
+    {/* 內容會自動滾動 */}
+  </form>
+  <DialogFooter>...</DialogFooter>
+</DialogContent>
+```
+
+---
+
 ## 12. 檢查清單
 
 在開發或審查頁面時，請確認以下項目：