From 998cf0f2be981ae90e57035400821d11af5cdb10 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 29 May 2026 16:00:02 -0500
Subject: [PATCH] make wizard footers consistent with dialog footers

---
 .../classification/wizard/Step1NameAndDefine.tsx      |  2 +-
 .../classification/wizard/Step2StateArea.tsx          |  2 +-
 .../classification/wizard/Step3ChooseExamples.tsx     |  2 +-
 .../overlay/detail/FaceCreateWizardDialog.tsx         |  6 +++---
 .../components/settings/wizard/Step1NameCamera.tsx    |  2 +-
 .../settings/wizard/Step2ProbeOrSnapshot.tsx          |  8 ++++----
 .../components/settings/wizard/Step3StreamConfig.tsx  |  2 +-
 .../components/settings/wizard/Step4Validation.tsx    |  2 +-
 .../components/trigger/wizard/Step1NameAndType.tsx    | 11 +++--------
 .../components/trigger/wizard/Step2ConfigureData.tsx  | 11 +++--------
 .../trigger/wizard/Step3ThresholdAndActions.tsx       | 11 +++--------
 11 files changed, 22 insertions(+), 37 deletions(-)

diff --git a/web/src/components/classification/wizard/Step1NameAndDefine.tsx b/web/src/components/classification/wizard/Step1NameAndDefine.tsx
index 72e69f0bc1..2399510088 100644
--- a/web/src/components/classification/wizard/Step1NameAndDefine.tsx
+++ b/web/src/components/classification/wizard/Step1NameAndDefine.tsx
@@ -489,7 +489,7 @@ export default function Step1NameAndDefine({
         </form>
       </Form>
 
-      <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
         <Button type="button" onClick={onCancel} className="sm:flex-1">
           {t("button.cancel", { ns: "common" })}
         </Button>
diff --git a/web/src/components/classification/wizard/Step2StateArea.tsx b/web/src/components/classification/wizard/Step2StateArea.tsx
index 84367a877d..7da1a62dc5 100644
--- a/web/src/components/classification/wizard/Step2StateArea.tsx
+++ b/web/src/components/classification/wizard/Step2StateArea.tsx
@@ -458,7 +458,7 @@ export default function Step2StateArea({
         </div>
       </div>
 
-      <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
         <Button type="button" onClick={onBack} className="sm:flex-1">
           {t("button.back", { ns: "common" })}
         </Button>
diff --git a/web/src/components/classification/wizard/Step3ChooseExamples.tsx b/web/src/components/classification/wizard/Step3ChooseExamples.tsx
index c6693d0296..d2861affca 100644
--- a/web/src/components/classification/wizard/Step3ChooseExamples.tsx
+++ b/web/src/components/classification/wizard/Step3ChooseExamples.tsx
@@ -693,7 +693,7 @@ export default function Step3ChooseExamples({
       )}
 
       {!isTraining && (
-        <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+        <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
           <Button type="button" onClick={handleBack} className="sm:flex-1">
             {t("button.back", { ns: "common" })}
           </Button>
diff --git a/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx b/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx
index 86eae6acb7..1ab0ffa1ba 100644
--- a/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx
+++ b/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx
@@ -131,7 +131,7 @@ export default function CreateFaceWizardDialog({
             forbiddenPattern={/#/}
             forbiddenErrorMessage={t("description.nameCannotContainHash")}
           >
-            <div className="flex justify-end py-2">
+            <div className="flex flex-col-reverse gap-2 py-2 sm:flex-row sm:justify-end">
               <Button variant="select" type="submit">
                 {t("button.next", { ns: "common" })}
               </Button>
@@ -144,7 +144,7 @@ export default function CreateFaceWizardDialog({
               {t("steps.description.uploadFace", { name })}
             </div>
             <ImageEntry onSave={onUploadImage}>
-              <div className="flex justify-end py-2">
+              <div className="flex flex-col-reverse gap-2 py-2 sm:flex-row sm:justify-end">
                 <Button variant="select" type="submit">
                   {t("button.next", { ns: "common" })}
                 </Button>
@@ -173,7 +173,7 @@ export default function CreateFaceWizardDialog({
                 <LuExternalLink className="ml-2 inline-flex size-3" />
               </Link>
             </div>
-            <div className="flex justify-end">
+            <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
               <Button
                 variant="select"
                 onClick={() => {
diff --git a/web/src/components/settings/wizard/Step1NameCamera.tsx b/web/src/components/settings/wizard/Step1NameCamera.tsx
index 0162d4d5d4..9c5545db41 100644
--- a/web/src/components/settings/wizard/Step1NameCamera.tsx
+++ b/web/src/components/settings/wizard/Step1NameCamera.tsx
@@ -455,7 +455,7 @@ export default function Step1NameCamera({
         </form>
       </Form>
 
-      <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
         <Button type="button" onClick={onCancel} className="sm:flex-1">
           {t("button.cancel", { ns: "common" })}
         </Button>
diff --git a/web/src/components/settings/wizard/Step2ProbeOrSnapshot.tsx b/web/src/components/settings/wizard/Step2ProbeOrSnapshot.tsx
index 7a52c8d047..1f805594d6 100644
--- a/web/src/components/settings/wizard/Step2ProbeOrSnapshot.tsx
+++ b/web/src/components/settings/wizard/Step2ProbeOrSnapshot.tsx
@@ -626,7 +626,7 @@ function ProbeFooterButtons({
           <ActivityIndicator className="size-4" />
           {t("cameraWizard.step2.probing")}
         </div>
-        <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+        <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
           <Button type="button" onClick={onBack} disabled className="sm:flex-1">
             {t("button.back", { ns: "common" })}
           </Button>
@@ -649,7 +649,7 @@ function ProbeFooterButtons({
     return (
       <div className="space-y-4">
         <div className="text-sm text-destructive">{probeError}</div>
-        <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+        <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
           <Button type="button" onClick={onBack} className="sm:flex-1">
             {t("button.back", { ns: "common" })}
           </Button>
@@ -670,7 +670,7 @@ function ProbeFooterButtons({
   // If manual mode, show Continue when test succeeded, otherwise show Test (calls onManualTest)
   if (mode === "manual") {
     return (
-      <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
         <Button type="button" onClick={onBack} className="sm:flex-1">
           {t("button.back", { ns: "common" })}
         </Button>
@@ -707,7 +707,7 @@ function ProbeFooterButtons({
 
   // Default probe footer
   return (
-    <div className="flex flex-col gap-3 pt-3 sm:flex-row sm:justify-end sm:gap-4">
+    <div className="flex flex-col-reverse gap-2 pt-3 sm:flex-row sm:justify-end">
       <Button type="button" onClick={onBack} className="sm:flex-1">
         {t("button.back", { ns: "common" })}
       </Button>
diff --git a/web/src/components/settings/wizard/Step3StreamConfig.tsx b/web/src/components/settings/wizard/Step3StreamConfig.tsx
index 39d8406f8c..170a4bc301 100644
--- a/web/src/components/settings/wizard/Step3StreamConfig.tsx
+++ b/web/src/components/settings/wizard/Step3StreamConfig.tsx
@@ -731,7 +731,7 @@ export default function Step3StreamConfig({
         </div>
       )}
 
-      <div className="flex flex-col gap-3 pt-6 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-6 sm:flex-row sm:justify-end">
         {onBack && (
           <Button type="button" onClick={onBack} className="sm:flex-1">
             {t("button.back", { ns: "common" })}
diff --git a/web/src/components/settings/wizard/Step4Validation.tsx b/web/src/components/settings/wizard/Step4Validation.tsx
index b739fe1ab5..4b9b72dbad 100644
--- a/web/src/components/settings/wizard/Step4Validation.tsx
+++ b/web/src/components/settings/wizard/Step4Validation.tsx
@@ -490,7 +490,7 @@ export default function Step4Validation({
         </div>
       </div>
 
-      <div className="flex flex-col gap-3 pt-6 sm:flex-row sm:justify-end sm:gap-4">
+      <div className="flex flex-col-reverse gap-2 pt-6 sm:flex-row sm:justify-end">
         {onBack && (
           <Button type="button" onClick={onBack} className="sm:flex-1">
             {t("button.back", { ns: "common" })}
diff --git a/web/src/components/trigger/wizard/Step1NameAndType.tsx b/web/src/components/trigger/wizard/Step1NameAndType.tsx
index 62e5ee962c..23afd8cc4b 100644
--- a/web/src/components/trigger/wizard/Step1NameAndType.tsx
+++ b/web/src/components/trigger/wizard/Step1NameAndType.tsx
@@ -176,20 +176,15 @@ export default function Step1NameAndType({
           )}
         />
 
-        <div className="flex gap-2 pt-4">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={onCancel}
-            className="flex-1"
-          >
+        <div className="flex flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-end">
+          <Button type="button" onClick={onCancel} className="sm:flex-1">
             {t("button.cancel", { ns: "common" })}
           </Button>
           <Button
             type="submit"
             variant="select"
             disabled={!form.formState.isValid}
-            className="flex-1"
+            className="sm:flex-1"
           >
             {t("button.next", { ns: "common" })}
           </Button>
diff --git a/web/src/components/trigger/wizard/Step2ConfigureData.tsx b/web/src/components/trigger/wizard/Step2ConfigureData.tsx
index 7cbb74cadf..e14bf75645 100644
--- a/web/src/components/trigger/wizard/Step2ConfigureData.tsx
+++ b/web/src/components/trigger/wizard/Step2ConfigureData.tsx
@@ -109,20 +109,15 @@ export default function Step2ConfigureData({
           )}
         />
 
-        <div className="flex gap-2 pt-4">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={onBack}
-            className="flex-1"
-          >
+        <div className="flex flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-end">
+          <Button type="button" onClick={onBack} className="sm:flex-1">
             {t("button.back", { ns: "common" })}
           </Button>
           <Button
             type="submit"
             variant="select"
             disabled={!form.formState.isValid}
-            className="flex-1"
+            className="sm:flex-1"
           >
             {t("button.next", { ns: "common" })}
           </Button>
diff --git a/web/src/components/trigger/wizard/Step3ThresholdAndActions.tsx b/web/src/components/trigger/wizard/Step3ThresholdAndActions.tsx
index 2b560ded3f..062bfa15cf 100644
--- a/web/src/components/trigger/wizard/Step3ThresholdAndActions.tsx
+++ b/web/src/components/trigger/wizard/Step3ThresholdAndActions.tsx
@@ -181,20 +181,15 @@ export default function Step3ThresholdAndActions({
           )}
         />
 
-        <div className="flex gap-2 pt-4">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={onBack}
-            className="flex-1"
-          >
+        <div className="flex flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-end">
+          <Button type="button" onClick={onBack} className="sm:flex-1">
             {t("button.back", { ns: "common" })}
           </Button>
           <Button
             type="button"
             onClick={handleSave}
             disabled={isLoading}
-            className="flex-1"
+            className="sm:flex-1"
             variant="select"
           >
             {isLoading && <ActivityIndicator className="mr-2 size-5" />}