mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-07 01:14:14 +00:00
Anso
90ea26f7c7
Replace raw Dialog/AlertDialog scaffolding in MfaEnrollDialog, MfaDisableDialog, and MfaBackupCodesDialog with the shared Modal* primitives introduced in D-1. Extract the duplicated BackupCodeTicket component into a shared file consumed by both enroll and regen flows. Fix a CSS grid auto-column blowout in Modal: the dialog's implicit auto column was sizing to the step rail's min-content (492px), overflowing the 448px max-w-md constraint and clipping right-side content. Adding grid-cols-1 to the DialogContent override forces the column to use minmax(0, 1fr), preventing any grid item from expanding the track past available space. Also add min-w-0 to the TOTP secret code element so its long monospaced string can truncate rather than drive column sizing. Kicker prefixes updated to SECURITY · per the tracker convention.
30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
import { cn } from '@/lib/utils';
|
|
|
|
export function BackupCodeTicket({ codes }: { codes: string[] }) {
|
|
return (
|
|
<div className="overflow-hidden rounded-md border border-card-border bg-background/60 shadow-[inset_0_2px_6px_0_oklch(0_0_0/0.35)]">
|
|
<div className="flex items-center justify-between border-b border-card-border/60 px-3 py-2 font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
|
|
<span>Recovery codes</span>
|
|
<span className="tabular-nums">{codes.length} issued</span>
|
|
</div>
|
|
<ol className="grid grid-cols-1 sm:grid-cols-2">
|
|
{codes.map((c, i) => (
|
|
<li
|
|
key={c}
|
|
className={cn(
|
|
'flex items-center gap-3 px-3 py-2 font-mono text-sm tabular-nums tracking-[0.15em] text-stat-value',
|
|
'border-t border-card-border/40',
|
|
i < 2 && 'sm:border-t-0',
|
|
)}
|
|
>
|
|
<span className="text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
|
|
{String(i + 1).padStart(2, '0')}
|
|
</span>
|
|
<span>{c}</span>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
);
|
|
}
|