Attempt some transition between app configure views

dashboard/src/components/app/Updates.vue

@@ -85,32 +85,32 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Dialog v-if="update" ref="dialog"
-    :title="$t('app.updateDialog.title', { app: app.fqdn })"
-    :reject-label="$t('main.dialog.cancel')"
-     reject-style="secondary"
-    :confirm-label="$t('app.updateDialog.updateAction')"
-    :confirm-active="!busyUpdate && update.manifest.dockerImage"
-    :confirm-busy="busyUpdate"
-    :alternate-label="!update.manifest.dockerImage && profile.isAtLeastOwner ? $t('app.updateDialog.setupSubscriptionAction') : ''"
-     alternate-style="success"
-    @confirm="onUpdate()"
-    @alternate="onSetupSubscription()"
-  >
-    <div>
-      <p class="text-danger" v-if="update.unstable">{{ $t('app.updateDialog.unstableWarning') }}</p>
-      <p>{{ $t('app.updateDialog.changelogHeader', { version: update.manifest.version }) }}</p>
-      <div v-html="marked.parse(update.manifest.changelog)"></div>
-      <p class="text-danger text-bold" v-if="!update.manifest.dockerImage">
-        <br/>
-        {{ $t('app.updateDialog.subscriptionExpired') }}
-      </p>
-
-      <Checkbox v-if="update.manifest.dockerImage" v-model="skipBackup" :label="$t('app.updateDialog.skipBackupCheckbox')" />
-    </div>
-  </Dialog>
-
   <div>
+    <Dialog v-if="update" ref="dialog"
+      :title="$t('app.updateDialog.title', { app: app.fqdn })"
+      :reject-label="$t('main.dialog.cancel')"
+       reject-style="secondary"
+      :confirm-label="$t('app.updateDialog.updateAction')"
+      :confirm-active="!busyUpdate && update.manifest.dockerImage"
+      :confirm-busy="busyUpdate"
+      :alternate-label="!update.manifest.dockerImage && profile.isAtLeastOwner ? $t('app.updateDialog.setupSubscriptionAction') : ''"
+       alternate-style="success"
+      @confirm="onUpdate()"
+      @alternate="onSetupSubscription()"
+    >
+      <div>
+        <p class="text-danger" v-if="update.unstable">{{ $t('app.updateDialog.unstableWarning') }}</p>
+        <p>{{ $t('app.updateDialog.changelogHeader', { version: update.manifest.version }) }}</p>
+        <div v-html="marked.parse(update.manifest.changelog)"></div>
+        <p class="text-danger text-bold" v-if="!update.manifest.dockerImage">
+          <br/>
+          {{ $t('app.updateDialog.subscriptionExpired') }}
+        </p>
+
+        <Checkbox v-if="update.manifest.dockerImage" v-model="skipBackup" :label="$t('app.updateDialog.skipBackupCheckbox')" />
+      </div>
+    </Dialog>
+
     <label>{{ $t('app.updatesTabTitle') }}</label>
 
     <p v-html="$t('app.updates.auto.description', { appStoreLink: 'https://www.cloudron.io/store/index.html' })"></p>