Move mailbox errors below the input fields

dashboard/src/components/MailboxDialog.vue

@@ -115,7 +115,6 @@ defineExpose({
     @confirm="onSubmit()"
   >
     <div>
-      <div class="has-error" v-if="formError">{{ formError }}</div>
 
       <form @submit.prevent="onSubmit()" novalidate autocomplete="off">
          <fieldset :disabled="busy">
@@ -127,6 +126,7 @@ defineExpose({
               <TextInput id="nameInput" style="flex-grow: 1;" v-model="name"/>
               <SingleSelect v-model="domain" :options="domains" option-key="domain" option-label="domain" />
             </InputGroup>
+            <div class="error-label" v-if="formError">{{ formError }}</div>
           </FormGroup>
 
           <FormGroup style="padding-bottom: 10px;">
@@ -149,13 +149,14 @@ defineExpose({
           <!-- we only show this on edit for now as it is a separate REST call which may fail after the mailbox was added -->
           <FormGroup v-if="mailbox">
             <label>{{ $t('email.editMailboxDialog.aliases') }}</label>
-            <div v-for="(alias, index) in aliases" :key="alias" style="margin-bottom: 10px;">
+            <div v-for="(alias, index) in aliases" :key="alias" style="margin-top: 10px;">
               <InputGroup>
                 <TextInput style="flex-grow: 1;" v-model="alias.name"/>
                 <SingleSelect v-model="alias.domain" :options="domains" option-key="domain" option-label="domain" />
                 <Button tool danger icon="fa-solid fa-trash-alt" @click="onRemoveAlias(index)"/>
               </InputGroup>
             </div>
+            <div class="error-label" v-if="formError">{{ formError }}</div>
             <div v-if="aliases.length === 0">
               {{ $t('email.editMailboxDialog.noAliases') }} <span class="actionable" @click="onAddAlias($event)">{{ $t('email.editMailboxDialog.addAliasAction') }}</span>
             </div>