Fix 2FA button overflow issue on smartphone (#323)

This commit is contained in:
Daniel Luiz Alves 2025-12-09 23:00:13 -03:00 committed by GitHub
commit 30639dd6dc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -121,7 +121,7 @@ export function TwoFactorForm() {
<CardDescription>{status.enabled ? t("twoFactor.enabled") : t("twoFactor.description")}</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex items-center justify-between">
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-0">
<div>
<p className="font-medium">
{t("twoFactor.status.label")}{" "}
@ -133,19 +133,29 @@ export function TwoFactorForm() {
</p>
)}
</div>
<div className="flex gap-2">
<div className="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
{status.enabled ? (
<>
<Button variant="outline" onClick={generateNewBackupCodes} disabled={isLoading}>
<Button
variant="outline"
onClick={generateNewBackupCodes}
disabled={isLoading}
className="w-full sm:w-auto"
>
<IconKey className="h-4 w-4" />
{t("twoFactor.backupCodes.generateNew")}
</Button>
<Button variant="destructive" onClick={() => setIsDisableModalOpen(true)} disabled={isLoading}>
<Button
variant="destructive"
onClick={() => setIsDisableModalOpen(true)}
disabled={isLoading}
className="w-full sm:w-auto"
>
{t("twoFactor.buttons.disable2FA")}
</Button>
</>
) : (
<Button onClick={startSetup} disabled={isLoading}>
<Button onClick={startSetup} disabled={isLoading} className="w-full sm:w-auto">
<IconShield className="h-4 w-4" />
{t("twoFactor.buttons.enable2FA")}
</Button>