Rework AccessControl component to not mix model values

dashboard/src/components/app/Email.vue

@@ -87,7 +87,7 @@ onMounted(async () => {
   domains.value = result.map(d => {
     return {
       id: d.domain,
-      label: d.domain,
+      label: `@${d.domain}`,
       domain: d.domain
     };
   });
@@ -141,12 +141,13 @@ onMounted(async () => {
               <FormGroup>
                 <div class="has-error" v-if="sendmailError">{{ sendmailError }}</div>
 
-                <InputGroup>
+                <div style="display: flex; gap: 10px;">
                   <TextInput v-if="sendmailSupportsDisplayName" v-model="sendmailDisplayName" :placeholder="$t('app.email.from.displayName')"/>
-                  <TextInput v-model="sendmailMailboxName" :placeholder="$t('app.email.from.mailboxPlaceholder')"/>
-                  <label>@</label>
-                  <SingleSelect v-model="sendmailDomain" :disabled="!enableMailbox" :options="domains" option-key="id"/>
-                </InputGroup>
+                  <InputGroup>
+                    <TextInput v-model="sendmailMailboxName" :placeholder="$t('app.email.from.mailboxPlaceholder')"/>
+                    <SingleSelect v-model="sendmailDomain" :disabled="!enableMailbox" :options="domains" option-key="id"/>
+                  </InputGroup>
+                </div>
               </FormGroup>
             </fieldset>
           </form>