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">