Various mobile overflow fixes

dashboard/src/components/ApiTokens.vue

@@ -37,10 +37,12 @@ const columns = {
   },
   scope: {
     label: t('profile.apiTokens.scope'),
+    hideMobile: true,
     sort: true
   },
   allowedIpRanges: {
     label: t('profile.apiTokens.allowedIpRanges'),
+    hideMobile: true,
     sort: true
   },
   actions: {}

dashboard/src/components/AppArchive.vue

@@ -23,9 +23,20 @@ const domainsModel = DomainsModel.create();
 
 const columns = {
   icon: {}, // archived
-  location: { label: t('backups.archives.location'), sort: true },
-  info: { label: t('backups.archives.info'), sort: false },
-  creationTime: { label: t('main.table.date'), sort: true },
+  location: {
+    label: t('backups.archives.location'),
+    sort: true
+  },
+  info: {
+    label: t('backups.archives.info'),
+    sort: false,
+    hideMobile: true,
+  },
+  creationTime: {
+    label: t('main.table.date'),
+    sort: true,
+    hideMobile: true,
+  },
   actions: {}
 };
 

dashboard/src/components/AppPasswords.vue

@@ -25,10 +25,12 @@ const columns = {
   },
   label: {
     label: t('profile.appPasswords.app'),
-    sort: true
+    sort: true,
+    hideMobile: true,
   },
   creationTime: {
     label: t('main.table.date'),
+    hideMobile: true,
     sort(a, b) {
       if (!a) return 1;
       if (!b) return -1;

dashboard/src/components/BackupList.vue

@@ -26,9 +26,20 @@ const dashboardModel = DashboardModel.create();
 
 const columns = {
   preserveSecs: {}, // archived
-  packageVersion: { label: t('backups.listing.version'), sort: true },
-  creationTime: { label: t('main.table.date'), sort: true },
-  content: { label: t('backups.listing.contents'), sort: false },
+  packageVersion: {
+    label: t('backups.listing.version'),
+    sort: true,
+    hideMobile: true,
+  },
+  creationTime: {
+    label: t('main.table.date'),
+    sort: true
+  },
+  content: {
+    label: t('backups.listing.contents'),
+    sort: false,
+    hideMobile: true,
+  },
   actions: {}
 };
 

dashboard/src/components/MailDomainStatus.vue

@@ -2,7 +2,6 @@
 
 import { ref, onMounted } from 'vue';
 import { Button } from 'pankow';
-import Section from './Section.vue';
 import MailModel from '../models/MailModel.js';
 
 const props = defineProps([ 'domain' ]);
@@ -59,8 +58,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Section>
-
+  <div>
     <h4>{{ $t('email.dnsStatus.title') }} &nbsp; <Button @click="refresh()" small tool icon="fa fa-sync-alt" :disabled="busy" :loading="busy"/></h4>
     <div v-html="$t('email.dnsStatus.description', { emailDnsDocsLink:'https://docs.cloudron.io/email/#dns-records'})"></div>
     <br/>
@@ -134,7 +132,7 @@ onMounted(async () => {
         </div>
       </div>
     </div>
-  </Section>
+  </div>
 </template>
 
 <style scoped>

dashboard/src/components/Section.vue

@@ -62,6 +62,7 @@ body.has-background .section {
 .section-header > div {
   display: flex;
   gap: 6px;
+  flex-wrap: wrap;
 }
 
 .section-divider {

dashboard/src/components/SettingsItem.vue

@@ -27,7 +27,7 @@
 }
 
 @media (max-width: 576px) {
-  .settings-item-body {
+  .settings-item[wrap] .settings-item-body {
     flex-wrap: wrap;
   }
 }