From f3b807772885841f62fb685fcfe3bb3cc462bc9c Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 22 Oct 2025 12:10:05 +0000
Subject: [PATCH] fix(web): make 2FA buttons responsive on mobile devices

Co-authored-by: danielalves96 <62755605+danielalves96@users.noreply.github.com>
---
 .../profile/components/two-factor-form.tsx    | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/profile/components/two-factor-form.tsx b/apps/web/src/app/profile/components/two-factor-form.tsx
index 9b81cb8..642dd03 100644
--- a/apps/web/src/app/profile/components/two-factor-form.tsx
+++ b/apps/web/src/app/profile/components/two-factor-form.tsx
@@ -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>