From 0234234108374edada78ac1fb86d32c41453a565 Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Mon, 8 Dec 2025 10:38:29 -0500
Subject: [PATCH] fix settings footer buttons break point on mobile

---
 .../[remoteExitNodeId]/credentials/page.tsx   | 40 ++++++++--------
 .../machine/[niceId]/credentials/page.tsx     | 48 ++++++++-----------
 .../sites/[niceId]/credentials/page.tsx       | 40 ++++++++--------
 src/components/Settings.tsx                   |  2 +-
 4 files changed, 60 insertions(+), 70 deletions(-)

diff --git a/src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/credentials/page.tsx b/src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/credentials/page.tsx
index 0cc84b27..4f66b7f8 100644
--- a/src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/credentials/page.tsx
+++ b/src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/credentials/page.tsx
@@ -198,27 +198,25 @@ export default function CredentialsPage() {
                     </SettingsSectionBody>
                     {build !== "oss" && (
                         <SettingsSectionFooter>
-                            <div className="flex gap-2">
-                                <Button
-                                    variant="outline"
-                                    onClick={() => {
-                                        setShouldDisconnect(false);
-                                        setModalOpen(true);
-                                    }}
-                                    disabled={isSecurityFeatureDisabled()}
-                                >
-                                    {t("regenerateCredentialsButton")}
-                                </Button>
-                                <Button
-                                    onClick={() => {
-                                        setShouldDisconnect(true);
-                                        setModalOpen(true);
-                                    }}
-                                    disabled={isSecurityFeatureDisabled()}
-                                >
-                                    {t("remoteExitNodeRegenerateAndDisconnect")}
-                                </Button>
-                            </div>
+                            <Button
+                                variant="outline"
+                                onClick={() => {
+                                    setShouldDisconnect(false);
+                                    setModalOpen(true);
+                                }}
+                                disabled={isSecurityFeatureDisabled()}
+                            >
+                                {t("regenerateCredentialsButton")}
+                            </Button>
+                            <Button
+                                onClick={() => {
+                                    setShouldDisconnect(true);
+                                    setModalOpen(true);
+                                }}
+                                disabled={isSecurityFeatureDisabled()}
+                            >
+                                {t("remoteExitNodeRegenerateAndDisconnect")}
+                            </Button>
                         </SettingsSectionFooter>
                     )}
                 </SettingsSection>
diff --git a/src/app/[orgId]/settings/clients/machine/[niceId]/credentials/page.tsx b/src/app/[orgId]/settings/clients/machine/[niceId]/credentials/page.tsx
index 881e6384..e75aa3eb 100644
--- a/src/app/[orgId]/settings/clients/machine/[niceId]/credentials/page.tsx
+++ b/src/app/[orgId]/settings/clients/machine/[niceId]/credentials/page.tsx
@@ -182,27 +182,25 @@ export default function CredentialsPage() {
                     </SettingsSectionBody>
                     {build !== "oss" && (
                         <SettingsSectionFooter>
-                            <div className="flex gap-2">
-                                <Button
-                                    variant="outline"
-                                    onClick={() => {
-                                        setShouldDisconnect(false);
-                                        setModalOpen(true);
-                                    }}
-                                    disabled={isSecurityFeatureDisabled()}
-                                >
-                                    {t("regenerateCredentialsButton")}
-                                </Button>
-                                <Button
-                                    onClick={() => {
-                                        setShouldDisconnect(true);
-                                        setModalOpen(true);
-                                    }}
-                                    disabled={isSecurityFeatureDisabled()}
-                                >
-                                    {t("clientRegenerateAndDisconnect")}
-                                </Button>
-                            </div>
+                            <Button
+                                variant="outline"
+                                onClick={() => {
+                                    setShouldDisconnect(false);
+                                    setModalOpen(true);
+                                }}
+                                disabled={isSecurityFeatureDisabled()}
+                            >
+                                {t("regenerateCredentialsButton")}
+                            </Button>
+                            <Button
+                                onClick={() => {
+                                    setShouldDisconnect(true);
+                                    setModalOpen(true);
+                                }}
+                                disabled={isSecurityFeatureDisabled()}
+                            >
+                                {t("clientRegenerateAndDisconnect")}
+                            </Button>
                         </SettingsSectionFooter>
                     )}
                 </SettingsSection>
@@ -229,9 +227,7 @@ export default function CredentialsPage() {
                                     )}
                                 </p>
                                 <p>
-                                    {t(
-                                        "clientRegenerateAndDisconnectWarning"
-                                    )}
+                                    {t("clientRegenerateAndDisconnectWarning")}
                                 </p>
                             </>
                         ) : (
@@ -241,9 +237,7 @@ export default function CredentialsPage() {
                                         "clientRegenerateCredentialsConfirmation"
                                     )}
                                 </p>
-                                <p>
-                                    {t("clientRegenerateCredentialsWarning")}
-                                </p>
+                                <p>{t("clientRegenerateCredentialsWarning")}</p>
                             </>
                         )}
                     </div>
diff --git a/src/app/[orgId]/settings/sites/[niceId]/credentials/page.tsx b/src/app/[orgId]/settings/sites/[niceId]/credentials/page.tsx
index b2b526ab..6258cd69 100644
--- a/src/app/[orgId]/settings/sites/[niceId]/credentials/page.tsx
+++ b/src/app/[orgId]/settings/sites/[niceId]/credentials/page.tsx
@@ -265,27 +265,25 @@ export default function CredentialsPage() {
                         </SettingsSectionBody>
                         {build !== "oss" && (
                             <SettingsSectionFooter>
-                                <div className="flex gap-2">
-                                    <Button
-                                        variant="outline"
-                                        onClick={() => {
-                                            setShouldDisconnect(false);
-                                            setModalOpen(true);
-                                        }}
-                                        disabled={isSecurityFeatureDisabled()}
-                                    >
-                                        {t("regenerateCredentialsButton")}
-                                    </Button>
-                                    <Button
-                                        onClick={() => {
-                                            setShouldDisconnect(true);
-                                            setModalOpen(true);
-                                        }}
-                                        disabled={isSecurityFeatureDisabled()}
-                                    >
-                                        {t("siteRegenerateAndDisconnect")}
-                                    </Button>
-                                </div>
+                                <Button
+                                    variant="outline"
+                                    onClick={() => {
+                                        setShouldDisconnect(false);
+                                        setModalOpen(true);
+                                    }}
+                                    disabled={isSecurityFeatureDisabled()}
+                                >
+                                    {t("regenerateCredentialsButton")}
+                                </Button>
+                                <Button
+                                    onClick={() => {
+                                        setShouldDisconnect(true);
+                                        setModalOpen(true);
+                                    }}
+                                    disabled={isSecurityFeatureDisabled()}
+                                >
+                                    {t("siteRegenerateAndDisconnect")}
+                                </Button>
                             </SettingsSectionFooter>
                         )}
                     </SettingsSection>
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 78f20b0a..194d8b46 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -66,7 +66,7 @@ export function SettingsSectionFooter({
     children: React.ReactNode;
 }) {
     return (
-        <div className="flex justify-end space-x-2 mt-auto pt-6">
+        <div className="flex flex-col md:flex-row justify-end space-y-2 md:space-y-0 md:space-x-2 mt-auto pt-6">
             {children}
         </div>
     );