Various mobile overflow fixes

dashboard/src/views/EmailView.vue

@@ -22,9 +22,18 @@ const tasksModel = TasksModel.create();
 
 const inputDialog = useTemplateRef('inputDialog');
 const columns = {
-  status: { width: '32px', sort: true },
-  domain: { label: t('emails.domains.domain'), sort: true },
-  config: { label: t('emails.domains.config') },
+  status: {
+    width: '32px',
+    sort: true
+  },
+  domain: {
+    label: t('emails.domains.domain'),
+    sort: true
+  },
+  config: {
+    label: t('emails.domains.config'),
+    hideMobile: true,
+  },
   actions: {}
 };
 const domains = ref([]);
@@ -413,12 +422,12 @@ onMounted(async () => {
     </Section>
 
     <Section :title="$t('emails.settings.title')" :padding="false">
-      <SettingsItem>
+      <SettingsItem wrap>
         <FormGroup style="flex-grow: 1;">
           <label>{{ $t('emails.settings.location') }}</label>
           <div v-html="$t('emails.changeDomainDialog.description')"></div>
         </FormGroup>
-        <div style="display: flex; gap: 6px; align-items: center;">
+        <div style="display: flex; gap: 6px; align-items: center; flex-wrap: wrap;">
           <InputGroup>
             <TextInput v-model="locationSubdomain" :disabled="locationChangeBusy"/>
             <SingleSelect v-model="locationDomain" :options="domains" option-key="domain" option-label="domain" :disabled="locationChangeBusy"/>
@@ -447,7 +456,7 @@ onMounted(async () => {
         <Switch v-model="virtualAllMailEnabled" @change="onChangeVirtualAllMail"/>
       </SettingsItem>
 
-      <SettingsItem>
+      <SettingsItem wrap>
         <FormGroup>
           <label for="maxEmailSizeInput">{{ $t('emails.settings.maxMailSize') }}</label>
           <div v-html="$t('emails.changeMailSizeDialog.description')"></div>