From d7c1a8f7ae99a7e246ec383a328049dbcd2bd773 Mon Sep 17 00:00:00 2001
From: Girish Ramakrishnan <girish@cloudron.io>
Date: Tue, 9 Sep 2025 15:55:01 +0200
Subject: [PATCH] setup/restore: fix alignment

---
 dashboard/src/views/RestoreView.vue | 23 ++++++++++++++++++++---
 dashboard/src/views/SetupView.vue   | 20 ++++++++++++++++++--
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/dashboard/src/views/RestoreView.vue b/dashboard/src/views/RestoreView.vue
index ce67d4fd8..10067efab 100644
--- a/dashboard/src/views/RestoreView.vue
+++ b/dashboard/src/views/RestoreView.vue
@@ -326,7 +326,7 @@ onMounted(async () => {
       </div>
 
       <div class="view" v-else style="max-width: 500px;">
-        <h1>Cloudron Restore</h1>
+        <h1 style="text-align: center">Cloudron Restore</h1>
         <p>Provide the backup to restore from</p>
 
         <div>
@@ -415,11 +415,28 @@ onMounted(async () => {
           </fieldset>
         </form>
 
-        <div style="margin-top: 12px">
+        <div class="actions">
           <Button @click="onSubmit()" :disabled="busy || !isFormValid" :loading="busy">Restore</Button>
-          <a href="/setup.html" style="margin-left: 10px;">Looking to setup?</a>
+          <a class="setup" href="/setup.html">Looking to setup?</a>
         </div>
+
       </div>
     </Transition>
   </div>
 </template>
+
+<style scoped>
+
+.actions {
+  margin-top: 1.5em;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.actions .setup {
+  margin-top: 1em;
+  font-size: 0.9em;
+}
+
+</style>
diff --git a/dashboard/src/views/SetupView.vue b/dashboard/src/views/SetupView.vue
index 1e104840b..c8056ba33 100644
--- a/dashboard/src/views/SetupView.vue
+++ b/dashboard/src/views/SetupView.vue
@@ -246,11 +246,27 @@ onMounted(async () => {
           </fieldset>
         </form>
 
-        <div style="margin-top: 1.5em">
+        <div class="actions">
           <Button @click="onSubmit()" :disabled="busy || !isFormValid" :loading="busy">Next</Button>
-          <a href="/restore.html" style="margin-left: 10px;">Looking to restore?</a>
+          <a class="restore" href="/restore.html">Looking to restore?</a>
         </div>
       </div>
     </Transition>
   </div>
 </template>
+
+<style scoped>
+
+.actions {
+  margin-top: 1.5em;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.actions .restore {
+  margin-top: 1em;
+  font-size: 0.9em;
+}
+
+</style>