From a0b0417eeef0bad390da40912675ce3e3ef3853c Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Fri, 15 May 2026 17:48:08 -0500
Subject: [PATCH] Fix signup install step footer layout

---
 src/App.vue   | 57 ++++++++++++++++++++++++++++++---------------------
 src/style.css | 10 +++++++++
 2 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d53a784..cb2b0ff 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3642,12 +3642,26 @@ watch(mobileMenuOpen, (open) => {
           </p>
         </div>
 
-        <div class="modal-footer border-t border-white/10 p-5">
-          <button v-if="signupStep > 0 && signupStep < 5" class="secondary-action" type="button" @click="previousStep">
-            Back
-          </button>
+        <div class="modal-footer border-t border-white/10 p-5" :class="{ 'install-step-footer': signupStep === 1 }">
+          <template v-if="signupStep === 0">
+            <button class="primary-action" type="button" @click="startSignup">
+              Start signup
+            </button>
+          </template>
 
-          <template v-if="signupStep === 5">
+          <template v-else-if="signupStep === 1">
+            <button class="secondary-action" type="button" @click="previousStep">
+              Back
+            </button>
+            <button class="primary-action" type="button" @click="handlePwaInstallPrimary">
+              {{ pwaInstallPrimaryLabel }}
+            </button>
+            <button v-if="installPlatform !== 'ios' && !isPwaStandalone" class="skip-app-action" type="button" @click="continueWithoutInstall">
+              Skip app
+            </button>
+          </template>
+
+          <template v-else-if="signupStep === 5">
             <button class="secondary-action" type="button" @click="openBackup">
               Export
             </button>
@@ -3655,24 +3669,21 @@ watch(mobileMenuOpen, (open) => {
               Import
             </button>
           </template>
-          <button v-if="signupStep === 0" class="primary-action" type="button" @click="startSignup">
-            Start signup
-          </button>
-          <button v-else-if="signupStep === 1" class="primary-action" type="button" @click="handlePwaInstallPrimary">
-            {{ pwaInstallPrimaryLabel }}
-          </button>
-          <button v-if="signupStep === 1 && installPlatform !== 'ios' && !isPwaStandalone" class="skip-app-action" type="button" @click="continueWithoutInstall">
-            Skip app
-          </button>
-          <button v-else-if="signupStep < 4" class="primary-action" type="button" @click="nextStep">
-            Continue
-          </button>
-          <button v-else-if="signupStep === 4" class="primary-action" type="button" :disabled="isCreatingMembership" @click="createMembership">
-            <span v-if="isCreatingMembership" class="button-spinner-only" aria-label="Creating card">
-              <img src="/images/small-logo.svg" alt="" />
-            </span>
-            <template v-else>Enable alerts & create card</template>
-          </button>
+
+          <template v-else>
+            <button class="secondary-action" type="button" @click="previousStep">
+              Back
+            </button>
+            <button v-if="signupStep < 4" class="primary-action" type="button" @click="nextStep">
+              Continue
+            </button>
+            <button v-else-if="signupStep === 4" class="primary-action" type="button" :disabled="isCreatingMembership" @click="createMembership">
+              <span v-if="isCreatingMembership" class="button-spinner-only" aria-label="Creating card">
+                <img src="/images/small-logo.svg" alt="" />
+              </span>
+              <template v-else>Enable alerts & create card</template>
+            </button>
+          </template>
         </div>
       </div>
     </div>
diff --git a/src/style.css b/src/style.css
index e9f6142..227eb0f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1203,6 +1203,16 @@ body.menu-open {
   grid-column: 1 / -1;
 }
 
+.modal-footer.install-step-footer {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.modal-footer.install-step-footer .primary-action {
+  grid-column: auto;
+  min-height: 3.85rem;
+  white-space: nowrap;
+}
+
 .skip-app-action {
   grid-column: 1 / -1;
   justify-self: center;