fix(web): ApprovalCard Sticky Footer (簽核按鈕永遠可見)

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

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
OG T
2026-03-24 23:47:22 +08:00
parent 38378276f3
commit e3714f19b7

View File

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