integrity: center align the indicator

dashboard/src/components/BackupInfoDialog.vue

@@ -42,6 +42,7 @@ const backupContentTableColumns = computed(() => {
       label: 'Integrity',
       sort: false,
       width: '100px',
+      align: 'center',
     };
   }
 
@@ -180,11 +181,11 @@ defineExpose({
           <div v-else style="text-align: right">-</div>
         </template>
         <template #integrity="{ item:content }">
-          <div v-if="content.lastIntegrityCheckTime" style="display: flex; align-items: center;">
+          <div v-if="content.lastIntegrityCheckTime" style="display: flex; align-items: center; justify-content: center;">
             <i v-if="content.integrityCheckStatus === 'passed'" class="fa-solid fa-check-circle" v-tooltip="prettyLongDate(content.lastIntegrityCheckTime)"></i>
             <i v-else class="fa-solid fa-times-circle" v-tooltip="prettyLongDate(content.lastIntegrityCheckTime)"></i>
           </div>
-          <div v-else>-</div>
+          <div v-else style="text-align: center;">-</div>
         </template>
       </TableView>
     </div>

dashboard/src/components/SystemBackupList.vue

@@ -54,6 +54,7 @@ const columns = {
     label: 'Integrity',
     sort: false,
     width: '100px',
+    align: 'center',
   },
   actions: {}
 };
@@ -334,11 +335,11 @@ defineExpose({ refresh });
 
       <template #integrity="{ item:backup }">
         <Spinner v-if="backup.integrityCheckTask?.active" style="min-width: 0;"/>
-        <div v-else-if="backup.lastIntegrityCheckTime" style="display: flex; align-items: center;">
+        <div v-else-if="backup.lastIntegrityCheckTime" style="display: flex; align-items: center; justify-content: center;">
           <i v-if="backup.integrityCheckStatus === 'passed'" class="fa-solid fa-check-circle" v-tooltip="prettyLongDate(backup.lastIntegrityCheckTime)"></i>
           <i v-else class="fa-solid fa-times-circle" v-tooltip="prettyLongDate(backup.lastIntegrityCheckTime)"></i>
         </div>
-        <div v-else>-</div>
+        <div v-else style="text-align: center;">-</div>
       </template>
 
       <template #actions="{ item:backup }">

dashboard/src/components/app/Backups.vue

@@ -53,6 +53,7 @@ const columns = ref({
     label: 'Integrity',
     sort: false,
     width: '100px',
+    align: 'center',
   },
   actions: {
     label: '',
@@ -440,11 +441,11 @@ onUnmounted(() => {
       </template>
       <template #integrity="{ item }">
         <Spinner v-if="item.integrityCheckTask?.active" style="min-width: 0;"/>
-        <div v-else-if="item.lastIntegrityCheckTime" style="display: flex; align-items: center;">
+        <div v-else-if="item.lastIntegrityCheckTime" style="display: flex; align-items: center; justify-content: center;">
           <i v-if="item.integrityCheckStatus === 'passed'" class="fa-solid fa-check-circle" v-tooltip="prettyLongDate(item.lastIntegrityCheckTime)"></i>
           <i v-else class="fa-solid fa-times-circle" v-tooltip="prettyLongDate(item.lastIntegrityCheckTime)"></i>
         </div>
-        <div v-else>-</div>
+        <div v-else style="text-align: center;">-</div>
       </template>
       <template #actions="{ item }">
         <ActionBar :actions="createActionMenu(item)"/>