fix settings footer buttons break point on mobile

This commit is contained in:
miloschwartz
2025-12-08 10:38:29 -05:00
parent f9b15b9156
commit 0234234108
4 changed files with 60 additions and 70 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>
);