From 65b988c686c14bc10530e6b90c3d25de5c41be90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 4 Jun 2026 16:26:58 +0200
Subject: [PATCH] fix(settings): right-align danger-zone action buttons beside
 their labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The data-reset and account-delete cards under Settings → Advanced
stacked their destructive button below the description. Move the
button to a right-aligned slot on the same row as the title and
description, matching the stack-on-mobile / right-align-on-desktop
contract the onboarding-tour and about cards already use
(flex-col gap-3 sm:flex-row sm:justify-between, button w-full sm:w-auto).
The AlertDialog confirmation, i18n keys, and destructive styling are
unchanged.
---
 src/components/settings/advanced-section.tsx | 42 ++++++++++++--------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/components/settings/advanced-section.tsx b/src/components/settings/advanced-section.tsx
index f40d4e577..279af5388 100644
--- a/src/components/settings/advanced-section.tsx
+++ b/src/components/settings/advanced-section.tsx
@@ -276,17 +276,23 @@ function DataResetCard() {
           GitHub-style (red CTA only) rather than red-on-red-on-red.
           The protective gate (confirmation dialog) is unchanged; this
           is purely a visual-tone fix per the v1.4.43 audit. */}
-      <h2 className="text-foreground text-lg font-semibold">
-        {t("settings.dangerZone")}
-      </h2>
-      <p className="text-muted-foreground mt-1 text-xs">
-        {t("settings.dangerZoneDescription")}
-      </p>
-
-      <div className="mt-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-2">
+        <div className="space-y-1">
+          <h2 className="text-foreground text-lg font-semibold">
+            {t("settings.dangerZone")}
+          </h2>
+          <p className="text-muted-foreground text-xs">
+            {t("settings.dangerZoneDescription")}
+          </p>
+        </div>
         <AlertDialog>
           <AlertDialogTrigger asChild>
-            <Button variant="destructive" size="sm" disabled={deleting}>
+            <Button
+              variant="destructive"
+              size="sm"
+              disabled={deleting}
+              className="w-full shrink-0 sm:w-auto"
+            >
               {deleting ? (
                 <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin motion-reduce:animate-none" />
               ) : (
@@ -389,20 +395,22 @@ function AccountDeleteCard() {
       className="bg-card border-border rounded-xl border p-6"
       data-slot="settings-account-delete-card"
     >
-      <h2 className="text-foreground text-lg font-semibold">
-        {t("settings.deleteAccountCardTitle")}
-      </h2>
-      <p className="text-muted-foreground mt-1 text-xs">
-        {t("settings.deleteAccountCardDescription")}
-      </p>
-
-      <div className="mt-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-2">
+        <div className="space-y-1">
+          <h2 className="text-foreground text-lg font-semibold">
+            {t("settings.deleteAccountCardTitle")}
+          </h2>
+          <p className="text-muted-foreground text-xs">
+            {t("settings.deleteAccountCardDescription")}
+          </p>
+        </div>
         <AlertDialog>
           <AlertDialogTrigger asChild>
             <Button
               variant="destructive"
               size="sm"
               disabled={deleting}
+              className="w-full shrink-0 sm:w-auto"
               data-slot="settings-account-delete-trigger"
             >
               {deleting ? (