mirror of
https://github.com/kyantech/Palmr.git
synced 2025-10-22 22:02:00 +00:00
fix(web): make 2FA buttons responsive on mobile devices
Co-authored-by: danielalves96 <62755605+danielalves96@users.noreply.github.com>
This commit is contained in:
@@ -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 sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<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>
|
||||
|
Reference in New Issue
Block a user