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;
   }
 }

dashboard/src/style.css

@@ -88,7 +88,6 @@ footer > .p {
 .content {
   max-width: 1280px;
   width: 100%;
-  margin-right: 10px;
 }
 
 .header {

dashboard/src/views/AppsView.vue

@@ -55,16 +55,19 @@ const listColumns = {
   },
   domain: {
     label: 'Location',
-    sort: true
+    sort: true,
+    hideMobile: true,
   },
   status: {},
   appTitle: {
     label: 'App Title',
-    sort: true
+    sort: true,
+    hideMobile: true,
   },
   sso: {
     label: 'Login',
-    sort: true
+    sort: true,
+    hideMobile: true,
   },
   actions: {}
 };
@@ -208,9 +211,9 @@ onUnmounted(() => {
       {{ $t('apps.title') }}
       <div style="display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px;">
         <TextInput v-model="filter" :placeholder="$t('apps.searchPlaceholder')" />
-        <Dropdown outline tool v-if="profile.isAtLeastAdmin" :options="tagFilterOptions" option-key="id" option-label="name" v-model="tagFilter"></Dropdown>
-        <Dropdown outline tool v-if="profile.isAtLeastAdmin" :options="stateFilterOptions" option-key="id" v-model="stateFilter"></Dropdown>
-        <Dropdown outline tool v-if="profile.isAtLeastAdmin" :options="domainFilterOptions" option-key="id" option-label="domain" v-model="domainFilter"></Dropdown>
+        <Dropdown class="pankow-no-mobile" outline tool v-if="profile.isAtLeastAdmin" :options="tagFilterOptions" option-key="id" option-label="name" v-model="tagFilter"></Dropdown>
+        <Dropdown class="pankow-no-mobile" outline tool v-if="profile.isAtLeastAdmin" :options="stateFilterOptions" option-key="id" v-model="stateFilter"></Dropdown>
+        <Dropdown class="pankow-no-mobile" outline tool v-if="profile.isAtLeastAdmin" :options="domainFilterOptions" option-key="id" option-label="domain" v-model="domainFilter"></Dropdown>
         <Button tool @click="toggleView()" :icon="viewType === VIEW_TYPE.GRID ? 'fas fa-list' : 'fas fa-grip'"></Button>
       </div>
     </h1>

dashboard/src/views/DomainsView.vue

@@ -88,7 +88,8 @@ const columns = ref({
   },
   provider: {
     label: t('domains.provider'),
-    sort: true
+    sort: true,
+    hideMobile: true,
   },
   actions: {
     label: '',

dashboard/src/views/EmailDomainView.vue

@@ -229,15 +229,16 @@ onMounted(async () => {
       </div>
     </Dialog>
 
-    <h1 style="display: flex; justify-content: space-between; padding-right: 20px">
-      {{ $t('email.config.title', { domain: domain }) }}
-      <Button secondary tool icon="fa-solid fa-book" v-tooltip="$t('app.docsActionTooltip')" :menu="infoMenu" />
-    </h1>
+    <Section :title="$t('email.config.title', { domain: domain })">
+      <template #header-buttons>
+        <Button secondary tool icon="fa-solid fa-book" v-tooltip="$t('app.docsActionTooltip')" :menu="infoMenu" />
+      </template>
 
-    <!-- v-if here ensures the prop is already set when passed down to MailDomainStatus -->
-    <MailDomainStatus v-if="domain" :domain="domain"/>
+      <!-- v-if here ensures the prop is already set when passed down to MailDomainStatus -->
+      <MailDomainStatus v-if="domain" :domain="domain"/>
+    </Section>
 
-    <Section :title="$t('emails.settings.title')">
+    <Section :title="$t('emails.settings.title')" :padding="false">
       <SettingsItem>
         <FormGroup>
           <label>{{ $t('email.incoming.title') }}</label>

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>

dashboard/src/views/MailboxesView.vue

@@ -23,10 +23,25 @@ const mailboxesModel = MailboxesModel.create();
 const usersModel = UsersModel.create();
 
 const columns = {
-  fullName: { label: t('email.incoming.mailboxes.name'), sort: true },
-  ownerDisplayName: { label: t('email.incoming.mailboxes.owner'), sort: true },
-  aliases: { label: t('email.incoming.mailboxes.aliases'), sort: true },
-  usage: { label: t('email.incoming.mailboxes.usage'), sort: true },
+  fullName: {
+    label: t('email.incoming.mailboxes.name'),
+    sort: true
+  },
+  ownerDisplayName: {
+    label: t('email.incoming.mailboxes.owner'),
+    sort: true,
+    hideMobile: true,
+  },
+  aliases: {
+    label: t('email.incoming.mailboxes.aliases'),
+    sort: true,
+    hideMobile: true,
+  },
+  usage: {
+    label: t('email.incoming.mailboxes.usage'),
+    sort: true,
+    hideMobile: true,
+  },
   actions: {}
 };
 

dashboard/src/views/MailinglistsView.vue

@@ -17,8 +17,15 @@ const mailinglistsModel = MailinglistsModel.create();
 
 const columns = {
   membersOnly: {},
-  fullName: { label: t('email.incoming.mailinglists.name'), sort: true },
-  members: { label: t('email.incoming.mailinglists.members'), sort: true },
+  fullName: {
+    label: t('email.incoming.mailinglists.name'),
+    sort: true
+  },
+  members: {
+    label: t('email.incoming.mailinglists.members'),
+    sort: true,
+    hideMobile: true,
+  },
   actions: {}
 };
 

dashboard/src/views/NetworkView.vue

@@ -3,6 +3,7 @@
 import { ref, onMounted, watch } from 'vue';
 import { Switch } from 'pankow';
 import Section from  '../components/Section.vue';
+import SettingsItem from  '../components/SettingsItem.vue';
 import Ipv4Config from '../components/Ipv4Config.vue';
 import Ipv6Config from '../components/Ipv6Config.vue';
 import Firewall from '../components/Firewall.vue';
@@ -33,11 +34,11 @@ onMounted(async () => {
     <Ipv6Config />
     <Firewall />
 
-    <Section :title="$t('network.dyndns.title')">
-      <p>{{ $t('network.dyndns.description') }}</p>
-      <!-- TODO<p class="text-danger" ng-show="dyndnsConfigure.error"><br/>{{ dyndnsConfigure.error }}</p> -->
-
-      <Switch v-model="dynDnsIsEnabled" :label="$t(dynDnsIsEnabled ? 'main.statusEnabled' : 'main.statusDisabled')" />
+    <Section :title="$t('network.dyndns.title')" :padding="false">
+      <SettingsItem>
+        <p>{{ $t('network.dyndns.description') }}</p>
+        <Switch v-model="dynDnsIsEnabled"/>
+      </SettingsItem>
     </Section>
   </div>
 </template>

dashboard/src/views/ServicesView.vue

@@ -20,9 +20,20 @@ const systemModel = SystemModel.create();
 
 const columns = {
   status: {},
-  name: { label: t('services.service'), sort: true },
-  memoryPercent: { label: t('services.memoryUsage'), sort: true },
-  memoryLimit: { label: t('services.memoryLimit'), sort: true },
+  name: {
+    label: t('services.service'),
+    sort: true
+  },
+  memoryPercent: {
+    label: t('services.memoryUsage'),
+    sort: true,
+    hideMobile: true,
+  },
+  memoryLimit: {
+    label: t('services.memoryLimit'),
+    sort: true,
+    hideMobile: true,
+  },
   actions: {}
 };
 

dashboard/src/views/SettingsView.vue

@@ -83,7 +83,7 @@ onMounted(async () => {
 <template>
   <div class="content">
     <Section :title="$t('settings.title')" :padding="false">
-      <SettingsItem>
+      <SettingsItem wrap>
         <FormGroup>
           <label>{{ $t('settings.timezone.title') }}</label>
           <div v-html="$t('settings.timezone.description', { timeZone })"></div>
@@ -93,7 +93,7 @@ onMounted(async () => {
         </div>
       </SettingsItem>
 
-      <SettingsItem>
+      <SettingsItem wrap>
         <FormGroup>
           <label>{{ $t('settings.language.title') }}</label>
           <div>{{ $t('settings.language.description') }}</div>

dashboard/src/views/UserDirectoryView.vue

@@ -3,6 +3,7 @@
 import { ref, onMounted, watch } from 'vue';
 import { Switch } from 'pankow';
 import Section from '../components/Section.vue';
+import SettingsItem from '../components/SettingsItem.vue';
 import ExternalLdap from '../components/ExternalLdap.vue';
 import ExposedLdap from '../components/ExposedLdap.vue';
 import OpenIdClients from '../components/OpenIdClients.vue';
@@ -35,13 +36,16 @@ onMounted(async () => {
 
 <template>
   <div class="content">
-    <Section :title="$t('users.title')">
-      <div>
-        <Switch v-model="editableUserProfiles" :label="$t('users.settings.allowProfileEditCheckbox')"/><sup><a href="https://docs.cloudron.io/user-directory/#lock-profile" target="_blank"><i class="fa fa-question-circle"></i></a></sup>
-      </div>
-      <div>
-        <Switch v-model="mandatory2FA" :label="$t('users.settings.require2FACheckbox')"/>
-      </div>
+    <Section :title="$t('users.title')" :padding="false">
+      <SettingsItem>
+        <div>{{ $t('users.settings.allowProfileEditCheckbox') }} <sup><a href="https://docs.cloudron.io/user-directory/#lock-profile" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
+        <Switch v-model="editableUserProfiles"/>
+      </SettingsItem>
+
+      <SettingsItem>
+        <div>{{ $t('users.settings.require2FACheckbox') }}</div>
+        <Switch v-model="mandatory2FA"/>
+      </SettingsItem>
     </Section>
 
     <ExternalLdap />

dashboard/src/views/UsersView.vue

@@ -21,15 +21,31 @@ const groupsModel = GroupsModel.create();
 const profileModel = ProfileModel.create();
 
 const usersColumns = {
-  role: { width: '33.5px' },
-  user: { label: t('users.users.user'), sort: true },
-  groups: { label: t('users.users.groups'), sort: true },
+  role: {
+    width: '33.5px'
+  },
+  user: {
+    label: t('users.users.user'),
+    sort: true
+  },
+  groups: {
+    label: t('users.users.groups'),
+    sort: true,
+    hideMobile: true,
+  },
   actions: {}
 };
 
 const groupsColumns = {
-  name: { label: t('users.groups.name'), sort: true },
-  users: { label: t('users.groups.users'), sort: true },
+  name: {
+    label: t('users.groups.name'),
+    sort: true
+  },
+  users: {
+    label: t('users.groups.users'),
+    sort: true,
+    hideMobile: true,
+  },
   actions: {}
 };
 

dashboard/src/views/VolumesView.vue

@@ -24,9 +24,20 @@ const mountTypeOptions = [
 
 const columns = {
   status: {},
-  name: { label: 'Name', sort: true },
-  mountType: { label: 'Type', sort: true },
-  target: { label: 'Target', sort: true },
+  name: {
+    label: 'Name',
+    sort: true
+  },
+  mountType: {
+    label: 'Type',
+    sort: true ,
+    hideMobile: true,
+  },
+  target: {
+    label: 'Target',
+    sort: true,
+    hideMobile: true,
+  },
   actions: {}
 };