add description field in various FormGroups

dashboard/src/components/app/Cron.vue

@@ -71,9 +71,7 @@ onMounted(() => {
             <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>
-
+          <div description>{{ $t('app.cron.description') }}</div>
           <textarea id="crontabInput" style="width: 100%; white-space: pre-wrap; font-family: monospace;" v-model="crontab" rows="10"></textarea>
         </FormGroup>
       </fieldset>

dashboard/src/components/app/Security.vue

@@ -56,8 +56,7 @@ onMounted(() => {
 
         <FormGroup>
           <label for="cspInput">{{ $t('app.security.csp.title') }} <sup><a href="https://docs.cloudron.io/apps/#custom-csp" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup> </label>
-          <div>{{ $t('app.security.csp.description') }}</div>
-          <br/>
+          <div description>{{ $t('app.security.csp.description') }}</div>
           <textarea id="cspInput" style="white-space: pre-wrap; font-family: monospace;" v-model="csp" placeholder="default-src 'self'; frame-ancestors 'none';" rows="2"></textarea>
         </FormGroup>
 
@@ -65,6 +64,7 @@ onMounted(() => {
           <Checkbox v-model="hstsPreload" style="display: inline-flex;" :label="$t('app.security.hstsPreload')" help-url="https://docs.cloudron.io/apps/#hsts-preload"/>
         </div>
 
+        <br/>
         <Button @click="onSubmit()" :loading="busy" :disabled="busy">{{ $t('app.security.csp.saveAction') }}</Button>
       </fieldset>
     </form>

dashboard/src/components/app/Storage.vue

@@ -18,8 +18,6 @@ const appDataVolumes = ref([]);
 const volumes = ref([]);
 const moveBusy = ref(false);
 const moveError = ref('');
-const diskUsage = ref(-1);
-const diskUsageDate = ref(0);
 const volumeId = ref('');
 const volumePrefix = ref('');
 const originalVolumeId = ref('');
@@ -156,9 +154,7 @@ onMounted(async () => {
   <div>
     <FormGroup>
       <label>{{ $t('app.storage.appdata.title') }} <sup><a href="https://docs.cloudron.io/apps/#data-directory" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
-      <div v-if="diskUsage !== -1" v-html="$t('app.storage.appdata.diskUsage', { size: '<b>' + prettyBinarySize(diskUsage) + '</b>', date: prettyDate(diskUsageDate) })"></div>
-      <div v-html="$t('app.storage.appdata.description', { storagePath: ('/home/yellowtent/appsdata/' + app.id) })"></div>
-      <br/>
+      <div description v-html="$t('app.storage.appdata.description', { storagePath: ('/home/yellowtent/appsdata/' + app.id) })"></div>
 
       <form @submit.prevent="onSubmitMove()" autocomplete="off">
         <fieldset :disabled="moveBusy || (app.error && app.error.details.installationState !== ISTATES.PENDING_DATA_DIR_MIGRATION) || !!app.taskId">
@@ -218,7 +214,7 @@ onMounted(async () => {
         </tbody>
       </table>
 
-      <div style="margin-top: 5px;">
+      <div style="margin-top: 10px;">
         <span v-if="mounts.length === 0">{{ $t('app.storage.mounts.noMounts') }}&nbsp;</span>
         <span class="actionable" @click="onMountAdd()">{{ $t('app.storage.mounts.addMountAction') }}</span>
       </div>