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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user