From 5246ea35374c201ed13c1efde55b0ed5645bfdd5 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Fri, 19 Sep 2025 19:08:26 +0200
Subject: [PATCH] Fix spacing for checklist and set 800px max-width for
 appconfigure

---
 dashboard/src/components/app/Info.vue    | 41 +++++++++++++-----------
 dashboard/src/views/AppConfigureView.vue |  2 +-
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/dashboard/src/components/app/Info.vue b/dashboard/src/components/app/Info.vue
index 87fa4b5e2..d02afe3ae 100644
--- a/dashboard/src/components/app/Info.vue
+++ b/dashboard/src/components/app/Info.vue
@@ -106,27 +106,30 @@ onMounted(() => {
       <div class="info-value">{{ prettyDate(app.updateTime) }}</div>
     </div>
 
+    <div v-if="app.checklist?.length">
+      <br/>
+      <div style="display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px;">
+        <div class="actionable" @click="showDoneChecklist = true" v-show="hasOldChecklist && !showDoneChecklist">{{ $t('app.appInfo.checklistShow') }}</div>
+        <div class="actionable" @click="showDoneChecklist = false" v-show="showDoneChecklist">{{ $t('app.appInfo.checklistHide') }}</div>
+      </div>
+
+      <div v-for="(item, key) in app.checklist" :key="key">
+        <div class="checklist-item" v-if="!item.acknowledged">
+          <span v-html="marked.parse(item.message)"></span>
+          <Button small plain tool style="margin-left: 10px;" @click="onAckChecklistItem(item, key)">{{ $t('main.dialog.done') }}</Button>
+        </div>
+      </div>
+
+      <div v-for="(item, key) in app.checklist" :key="key" v-show="showDoneChecklist">
+        <div class="checklist-item checklist-item-acknowledged" v-if="item.acknowledged">
+          <span v-html="marked.parse(item.message)"></span>
+          <span class="text-muted text-small">{{ item.changedBy }} - {{ prettyDate(item.changedAt) }}</span>
+        </div>
+      </div>
+    </div>
+
     <br/>
 
-    <div style="display: flex; justify-content: flex-start; align-items: center;">
-      <div class="actionable" @click="showDoneChecklist = true" v-show="hasOldChecklist && !showDoneChecklist">{{ $t('app.appInfo.checklistShow') }}</div>
-      <div class="actionable" @click="showDoneChecklist = false" v-show="showDoneChecklist">{{ $t('app.appInfo.checklistHide') }}</div>
-    </div>
-
-    <div v-for="(item, key) in app.checklist" :key="key">
-      <div class="checklist-item" v-if="!item.acknowledged">
-        <span v-html="marked.parse(item.message)"></span>
-        <Button small plain tool style="margin-left: 10px;" @click="onAckChecklistItem(item, key)">{{ $t('main.dialog.done') }}</Button>
-      </div>
-    </div>
-
-    <div v-for="(item, key) in app.checklist" :key="key" v-show="showDoneChecklist">
-      <div class="checklist-item checklist-item-acknowledged" v-if="item.acknowledged">
-        <span v-html="marked.parse(item.message)"></span>
-        <span class="text-muted text-small">{{ item.changedBy }} - {{ prettyDate(item.changedAt) }}</span>
-      </div>
-    </div>
-
     <label class="control-label">
       {{ $t('app.info.notes.title') }}
       <i v-show="!editing" class="info-edit-indicator fa fa-pencil-alt" @click="onEdit()"></i>
diff --git a/dashboard/src/views/AppConfigureView.vue b/dashboard/src/views/AppConfigureView.vue
index bc06d3925..4ded858dc 100644
--- a/dashboard/src/views/AppConfigureView.vue
+++ b/dashboard/src/views/AppConfigureView.vue
@@ -364,7 +364,7 @@ onBeforeUnmount(() => {
 
 .configure-inner {
   width: 100%;
-  max-width: 1200px;
+  max-width: 800px;
   margin: auto;
   padding: 0 15px;
 }