More layout fixes to the app configure view

dashboard/src/components/app/Cron.vue

@@ -66,14 +66,14 @@ onMounted(() => {
       <fieldset :disabled="busy || app.error">
         <input style="display: none;" type="submit" />
 
-        <FormGroup>
-          <label style="display: flex; justify-content: space-between;">
-            <span>{{ $t('app.cron.title') }} <sup><a href="https://docs.cloudron.io/apps/#cron" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></span>
-            <Button small outline :menu="commonPatternsMenu">{{ $t('app.cron.addCommonPattern') }}</Button>
-          </label>
-          <p>{{ $t('app.cron.description') }}</p>
-          <textarea style="white-space: pre-wrap; font-family: monospace;" v-model="crontab" rows="10"></textarea>
-        </FormGroup>
+        <label for="crontabInput" style="display: flex; justify-content: space-between;">
+          <span>{{ $t('app.cron.title') }} <sup><a href="https://docs.cloudron.io/apps/#cron" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></span>
+          <Button small outline :menu="commonPatternsMenu">{{ $t('app.cron.addCommonPattern') }}</Button>
+        </label>
+
+        <div>{{ $t('app.cron.description') }}</div>
+
+        <textarea id="crontabInput" style="width: 100%; white-space: pre-wrap; font-family: monospace;" v-model="crontab" rows="10"></textarea>
 
         <Button @click="onSubmit()" :loading="busy" :disabled="busy">{{ $t('app.cron.saveAction') }}</Button>
       </fieldset>

dashboard/src/components/app/Email.vue

@@ -133,7 +133,8 @@ onMounted(async () => {
         <Radiobutton v-if="sendmailOptional" v-model="enableMailbox" :value="1" :label="$t('app.email.from.enable')"/>
 
         <div style="margin-bottom: 18px;" :style="{ 'padding-left': sendmailOptional ? '20px' : '0' }">
-          <p v-html="$t('app.email.from.enableDescription', { domain: app.domain, domainConfigLink: ('/#/email/' + app.domain) })"></p>
+          <div v-html="$t('app.email.from.enableDescription', { domain: app.domain, domainConfigLink: ('/#/email/' + app.domain) })"></div>
+          <br/>
 
           <form @submit.prevent="onSendmailSubmit()" autocomplete="off">
             <fieldset :disabled="enableMailbox === 0 || sendmailBusy || (app.error && app.error.details.installationState !== ISTATES.PENDING_SERVICES_CHANGE) || app.taskId">

dashboard/src/components/app/Repair.vue

@@ -64,18 +64,20 @@ onMounted(() => {
 <template>
   <div>
     <label>{{ $t('app.repair.recovery.title') }}</label>
-    <p v-html="$t('app.repair.recovery.description', { docsLink: 'https://docs.cloudron.io/troubleshooting/#unresponsive-app' })"></p>
+    <div v-html="$t('app.repair.recovery.description', { docsLink: 'https://docs.cloudron.io/troubleshooting/#unresponsive-app' })"></div>
+    <br/>
 
     <div style="display: flex; justify-content: space-between;">
       <Switch v-model="debugMode" @change="onDebugMode" :disabled="debugModeBusy || (app.error && app.error.details.installationState !== ISTATES.PENDING_DEBUG) || app.taskId" label="Recovery Mode"/>
       <Button @click="onRestart()" :disabled="busyRestart || app.taskId || !!app.error" :loading="busyRestart || app.installationState === 'pending_restart'">{{ $t('app.repair.recovery.restartAction') }}</Button>
     </div>
 
-    <hr/>
+    <hr style="margin-top: 20px"/>
 
     <label>{{ $t('app.repair.taskError.title') }}</label>
-    <p>{{ $t('app.repair.taskError.description') }}</p>
-    <p v-if="app.error">An error occurred during the <b>{{ taskNameFromInstallationState(app.error.details.installationState) }}</b> operation: <span class="text-danger"><b>{{ app.error.reason + ': ' + app.error.message }}</b></span></p>
+    <div>{{ $t('app.repair.taskError.description') }}</div>
+    <br/>
+    <div v-if="app.error">An error occurred during the <b>{{ taskNameFromInstallationState(app.error.details.installationState) }}</b> operation: <span class="text-danger"><b>{{ app.error.reason + ': ' + app.error.message }}</b></span></div>
     <Button @click="onRepair()" :disabled="busyRepair || app.taskId || !app.error" :loading="busyRepair">{{ $t('app.repair.taskError.retryAction', { task: app.error ? taskNameFromInstallationState(app.error.details.installationState) : '' }) }}</Button>
   </div>
 </template>

dashboard/src/components/app/Uninstall.vue

@@ -105,7 +105,8 @@ onMounted(async () => {
 
     <div>
       <label>{{ $t('app.uninstall.startStop.title') }}</label>
-      <p>{{ $t('app.uninstall.startStop.description') }}</p>
+      <div>{{ $t('app.uninstall.startStop.description') }}</div>
+      <br/>
       <Button @click="onToggleRunState()"
         :disabled="toggleRunStateBusy || !!app.taskId || (app.error && (app.error.details.installationState !== 'pending_start' && app.error.details.installationState !== 'pending_stop')) || app.installationState === 'pending_start' || app.installationState === 'pending_stop'"
         :loading="toggleRunStateBusy || app.installationState === 'pending_start' || app.installationState === 'pending_stop'"
@@ -114,21 +115,23 @@ onMounted(async () => {
       </Button>
     </div>
 
-    <hr v-if="app.type !== APP_TYPES.PROXIED"/>
+    <hr style="margin-top: 20px" v-if="app.type !== APP_TYPES.PROXIED"/>
 
     <div v-if="app.type !== APP_TYPES.PROXIED">
       <label>{{ $t('app.archive.title') }}</label>
-      <p v-html="$t('app.archive.description')"></p>
+      <div v-html="$t('app.archive.description')"></div>
+      <br/>
       <p class="text-bold text-success" v-if="latestBackup" v-html="$t('app.archive.latestBackupInfo', { date: prettyLongDate(latestBackup.creationTime) })"></p>
       <p class="text-bold text-warning" v-else v-html="$t('app.archive.noBackup')"></p>
       <Button :disabled="!latestBackup" @click="onArchive()">{{ $t('app.archive.action') }}</Button>
     </div>
 
-    <hr/>
+    <hr style="margin-top: 20px"/>
 
     <div>
       <label>{{ $t('app.uninstall.uninstall.title') }}</label>
-      <p>{{ $t('app.uninstall.uninstall.description') }}</p>
+      <div>{{ $t('app.uninstall.uninstall.description') }}</div>
+      <br/>
       <Button danger @click="onUninstall()">{{ $t('app.uninstall.uninstall.uninstallAction') }}</button>
     </div>
   </div>

dashboard/src/components/app/Updates.vue

@@ -132,8 +132,8 @@ onMounted(async () => {
         <label>{{ $t('app.updatesTabTitle') }}</label>
         <div v-html="$t('app.updates.auto.description', { appStoreLink: 'https://www.cloudron.io/store/index.html' })"></div>
       </div>
-      <Button v-if="app.appStoreId" @click="onCheck()" :disabled="busyCheck" :loading="busyCheck">{{ $t('settings.updates.checkForUpdatesAction') }}</Button>
     </SettingsItem>
+    <Button v-if="app.appStoreId" @click="onCheck()" :disabled="busyCheck" :loading="busyCheck">{{ $t('settings.updates.checkForUpdatesAction') }}</Button>
 
     <SettingsItem v-if="app.updateInfo" style="padding: 10px;">
       <div>