From e3714f19b7303c6088d9c3b23992f3ea1c76695a Mon Sep 17 00:00:00 2001
From: OG T <ogt@WOOOMacMiniM4.local>
Date: Tue, 24 Mar 2026 23:47:22 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20ApprovalCard=20Sticky=20Footer=20(?=
 =?UTF-8?q?=E7=B0=BD=E6=A0=B8=E6=8C=89=E9=88=95=E6=B0=B8=E9=81=A0=E5=8F=AF?=
 =?UTF-8?q?=E8=A6=8B)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UX 問題: 卡片過長，滾動到底部簽核時看不到頂部內容

修復:
- max-h-[70vh] 限制卡片最大高度
- 內容區域可滾動 (overflow-y-auto)
- Footer sticky 固定在底部
- 簽核按鈕永遠可見

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/web/src/components/approval/approval-card.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/approval/approval-card.tsx b/apps/web/src/components/approval/approval-card.tsx
index 5e668b69d..3b0a3d515 100644
--- a/apps/web/src/components/approval/approval-card.tsx
+++ b/apps/web/src/components/approval/approval-card.tsx
@@ -323,9 +323,11 @@ export function ApprovalCard({
   return (
     <GlassCard
       variant={isCritical ? 'elevated' : 'default'}
-      padding="lg"
+      padding="none"
       className={cn(
-        'relative transition-all duration-300',
+        'relative transition-all duration-300 flex flex-col',
+        // UX 優化: 限制最大高度，內容可滾動
+        'max-h-[70vh]',
         // Nothing.tech 精密極簡風格
         !readOnly && 'hover:-translate-y-0.5 hover:shadow-card-hover',
         // CRITICAL: 左側紅色粗邊框 (乾淨、無光害)
@@ -344,6 +346,8 @@ export function ApprovalCard({
       )}
       aria-label={`${request.action} - ${riskLabel}`}
     >
+      {/* 可滾動的內容區域 */}
+      <div className="flex-1 overflow-y-auto p-6 pb-0">
       {/* 歷史紀錄 - 最終狀態 Badge */}
       {readOnly && finalStatus && (
         <div className={cn(
@@ -555,8 +559,11 @@ export function ApprovalCard({
           </div>
         </div>
       </GlassCardContent>
+      </div>
+      {/* 結束可滾動區域 */}
 
-      <GlassCardFooter>
+      {/* Sticky Footer - 簽核按鈕永遠可見 */}
+      <GlassCardFooter className="sticky bottom-0 bg-white border-t border-nothing-gray-100 p-4 mt-auto">
         {/* Meta */}
         <div className="flex items-center justify-between mb-4">
           <div className="text-xs text-nothing-gray-500 font-mono">