[BS5] Replace FooTable with jquery Datatables

data/web/css/build/013-mailcow.css

@@ -244,10 +244,17 @@ code {
 .dropdown-header {
   font-weight: 600;
 }
+
 .dataTables_info {
-  margin: 15px !important;
+  margin: 15px 0 !important;
   padding: 0px !important;
 }
 .dataTables_paginate, .dataTables_length, .dataTables_filter {
-  margin: 15px !important;
+  margin: 15px 0 !important;
+}
+.dtr-details {
+  width: 100%;
+}
+.dtr-title {
+  width: 20%;
 }

data/web/js/site/debug.js

@@ -832,19 +832,35 @@ jQuery(function($){
       });
     }
   })
-  // Initial table drawings
+
-  draw_postfix_logs();
+  // detect element visibility changes
-  draw_autodiscover_logs();
+  function onVisible(element, callback) {
-  draw_dovecot_logs();
+    $(element).ready(function() {
-  draw_sogo_logs();
+      element_object = document.querySelector(element)
-  draw_watchdog_logs();
+      new IntersectionObserver((entries, observer) => {
-  draw_acme_logs();
+        entries.forEach(entry => {
-  draw_api_logs();
+          if(entry.intersectionRatio > 0) {
-  draw_rl_logs();
+            callback(element_object);
-  draw_ui_logs();
+            observer.disconnect();
-  draw_sasl_logs();
+          }
-  draw_netfilter_logs();
+        });
-  draw_rspamd_history();
+      }).observe(element_object);
+    });
+  }
+  // Draw Table if tab is active
+  onVisible("[id^=tab-postfix-logs]", () => draw_postfix_logs());
+  onVisible("[id^=tab-dovecot-logs]", () => draw_dovecot_logs());
+  onVisible("[id^=tab-sogo-logs]", () => draw_sogo_logs());
+  onVisible("[id^=tab-watchdog-logs]", () => draw_watchdog_logs());
+  onVisible("[id^=tab-autodiscover-logs]", () => draw_autodiscover_logs());
+  onVisible("[id^=tab-acme-logs]", () => draw_acme_logs());
+  onVisible("[id^=tab-api-logs]", () => draw_api_logs());
+  onVisible("[id^=tab-api-rl]", () => draw_rl_logs());
+  onVisible("[id^=tab-ui]", () => draw_ui_logs());
+  onVisible("[id^=tab-sasl]", () => draw_sasl_logs());
+  onVisible("[id^=tab-netfilter-logs]", () => draw_netfilter_logs());
+  onVisible("[id^=tab-rspamd-history]", () => draw_rspamd_history());
+
   $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
     var target = $(e.target).attr("href");
     if (target == '#tab-rspamd-history') {

data/web/js/site/mailbox.js

@@ -220,6 +220,9 @@ $(document).ready(function() {
 
 });
 jQuery(function($){
+  // http://stackoverflow.com/questions/24816/escaping-html-strings-with-jquery
+  var entityMap={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","/":"&#x2F;","`":"&#x60;","=":"&#x3D;"};
+  function escapeHtml(n){return String(n).replace(/[&<>"'`=\/]/g,function(n){return entityMap[n]})}
   // http://stackoverflow.com/questions/46155/validate-email-address-in-javascript
   function humanFileSize(i){if(Math.abs(i)<1024)return i+" B";var B=["KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"],e=-1;do{i/=1024,++e}while(Math.abs(i)>=1024&&e<B.length-1);return i.toFixed(1)+" "+B[e]}
   function unix_time_format(i){return""==i?'<i class="bi bi-x-lg"></i>':new Date(i?1e3*i:0).toLocaleDateString(void 0,{year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"})}
@@ -228,26 +231,6 @@ jQuery(function($){
     var table_name = $(this).data('table');
     $('#' + table_name).DataTable().ajax.reload();
   });
-  function table_mailbox_ready(ft, name) {
-    if(is_dual) {
-      $('.login_as').data("toggle", "tooltip")
-        .attr("disabled", true)
-        .removeAttr("href")
-        .attr("title", "Dual login cannot be used twice")
-        .tooltip();
-    }
-    $('.refresh_table').prop("disabled", false);
-    heading = ft.$el.parents('.card').find('.card-header')
-    var ft_paging = ft.use(FooTable.Paging)
-    $(heading).children('.table-lines').text(function(){
-      var total_rows = ft_paging.totalRows;
-      var size = ft_paging.size;
-      if (size > total_rows) {
-        size = total_rows;
-      }
-      return size + ' / ' + total_rows;
-    })
-  }
   function draw_domain_table() {
     $('#domain_table').DataTable({
       processing: true,
@@ -257,6 +240,7 @@ jQuery(function($){
         type: "GET",
         url: "/api/v1/get/domain/all",
         dataSrc: function(json){
+          console.log(json);
           $.each(json, function(i, item) {
             item.aliases = item.aliases_in_domain + " / " + item.max_num_aliases_for_domain;
             item.mailboxes = item.mboxes_in_domain + " / " + item.max_num_mboxes_for_domain;
@@ -370,6 +354,7 @@ jQuery(function($){
   }
   function draw_mailbox_table() {
     $('#mailbox_table').DataTable({
+			responsive : true,
       processing: true,
       serverSide: false,
       language: lang_datatables,
@@ -451,6 +436,18 @@ jQuery(function($){
         }
       },
       columns: [
+          {
+            // placeholder, so checkbox will not block child row toggle
+            title: '',
+            data: null,
+            searchable: false,
+            orderable: false,
+            defaultContent: ''
+          },
+          {
+            title: '',
+            data: 'chkbox'
+          },
           {
             title: lang.username,
             data: 'username'
@@ -520,7 +517,7 @@ jQuery(function($){
             title: lang.active,
             data: 'active',
             render: function (data, type) {
-              return 1==value?'<i class="bi bi-check-lg"></i>':(0==value?'<i class="bi bi-x-lg"></i>':2==value&&'&#8212;');
+              return 1==data?'<i class="bi bi-check-lg"></i>':(0==data?'<i class="bi bi-x-lg"></i>':2==data&&'&#8212;');
             }
           },
           {
@@ -570,6 +567,18 @@ jQuery(function($){
         }
       },
       columns: [
+          {
+            // placeholder, so checkbox will not block child row toggle
+            title: '',
+            data: null,
+            searchable: false,
+            orderable: false,
+            defaultContent: ''
+          },
+          {
+            title: '',
+            data: 'chkbox'
+          },
           {
             title: lang.description,
             data: 'description'
@@ -599,17 +608,7 @@ jQuery(function($){
           },
           {
             title: lang.action,
-            data: null,
+            data: 'action'
-            render: function (data, type) {
-              return `<div class="btn-group">
-                <a href="/edit/admin/admin" class="btn btn-xs btn-xs-half btn-secondary">
-                  <i class="bi bi-pencil-fill"></i> Bearbeiten
-                </a>
-                <a href="#" data-action="delete_selected" data-id="single-admin" data-api-url="delete/admin" data-item="admin" class="btn btn-xs btn-xs-half btn-danger">
-                  <i class="bi bi-trash"></i> Entfernen
-                </a>
-              </div>`;
-            }
           },
       ]
     });
@@ -643,6 +642,18 @@ jQuery(function($){
         }
       },
       columns: [
+          {
+            // placeholder, so checkbox will not block child row toggle
+            title: '',
+            data: null,
+            searchable: false,
+            orderable: false,
+            defaultContent: ''
+          },
+          {
+            title: '',
+            data: 'chkbox'
+          },
           {
             title: 'ID',
             data: 'id'
@@ -672,17 +683,7 @@ jQuery(function($){
           },
           {
             title: lang.action,
-            data: null,
+            data: 'action'
-            render: function (data, type) {
-              return `<div class="btn-group">
-                <a href="/edit/admin/admin" class="btn btn-xs btn-xs-half btn-secondary">
-                  <i class="bi bi-pencil-fill"></i> Bearbeiten
-                </a>
-                <a href="#" data-action="delete_selected" data-id="single-admin" data-api-url="delete/admin" data-item="admin" class="btn btn-xs btn-xs-half btn-danger">
-                  <i class="bi bi-trash"></i> Entfernen
-                </a>
-              </div>`;
-            }
           },
       ]
     });
@@ -713,6 +714,18 @@ jQuery(function($){
         }
       },
       columns: [
+          {
+            // placeholder, so checkbox will not block child row toggle
+            title: '',
+            data: null,
+            searchable: false,
+            orderable: false,
+            defaultContent: ''
+          },
+          {
+            title: '',
+            data: 'chkbox'
+          },
           {
             title: 'ID',
             data: 'id'
@@ -734,17 +747,7 @@ jQuery(function($){
           },
           {
             title: lang.action,
-            data: null,
+            data: 'action'
-            render: function (data, type) {
-              return `<div class="btn-group">
-                <a href="/edit/admin/admin" class="btn btn-xs btn-xs-half btn-secondary">
-                  <i class="bi bi-pencil-fill"></i> Bearbeiten
-                </a>
-                <a href="#" data-action="delete_selected" data-id="single-admin" data-api-url="delete/admin" data-item="admin" class="btn btn-xs btn-xs-half btn-danger">
-                  <i class="bi bi-trash"></i> Entfernen
-                </a>
-              </div>`;
-            }
           },
       ]
     });
@@ -780,6 +783,18 @@ jQuery(function($){
         }
       },
       columns: [
+          {
+            // placeholder, so checkbox will not block child row toggle
+            title: '',
+            data: null,
+            searchable: false,
+            orderable: false,
+            defaultContent: ''
+          },
+          {
+            title: '',
+            data: 'chkbox'
+          },
           {
             title: 'ID',
             data: 'id'
@@ -809,17 +824,7 @@ jQuery(function($){
           },
           {
             title: lang.action,
-            data: null,
+            data: 'action'
-            render: function (data, type) {
-              return `<div class="btn-group">
-                <a href="/edit/admin/admin" class="btn btn-xs btn-xs-half btn-secondary">
-                  <i class="bi bi-pencil-fill"></i> Bearbeiten
-                </a>
-                <a href="#" data-action="delete_selected" data-id="single-admin" data-api-url="delete/admin" data-item="admin" class="btn btn-xs btn-xs-half btn-danger">
-                  <i class="bi bi-trash"></i> Entfernen
-                </a>
-              </div>`;
-            }
           },
       ]
     });
@@ -877,6 +882,18 @@ jQuery(function($){
         }
       },
       columns: [
+          {
+            // placeholder, so checkbox will not block child row toggle
+            title: '',
+            data: null,
+            searchable: false,
+            orderable: false,
+            defaultContent: ''
+          },
+          {
+            title: '',
+            data: 'chkbox'
+          },
           {
             title: 'ID',
             data: 'id'
@@ -918,17 +935,7 @@ jQuery(function($){
           },
           {
             title: lang.action,
-            data: null,
+            data: 'action'
-            render: function (data, type) {
-              return `<div class="btn-group">
-                <a href="/edit/admin/admin" class="btn btn-xs btn-xs-half btn-secondary">
-                  <i class="bi bi-pencil-fill"></i> Bearbeiten
-                </a>
-                <a href="#" data-action="delete_selected" data-id="single-admin" data-api-url="delete/admin" data-item="admin" class="btn btn-xs btn-xs-half btn-danger">
-                  <i class="bi bi-trash"></i> Entfernen
-                </a>
-              </div>`;
-            }
           },
       ]
     });
@@ -961,6 +968,18 @@ jQuery(function($){
         }
       },
       columns: [
+          {
+            // placeholder, so checkbox will not block child row toggle
+            title: '',
+            data: null,
+            searchable: false,
+            orderable: false,
+            defaultContent: ''
+          },
+          {
+            title: '',
+            data: 'chkbox'
+          },
           {
             title: lang.alias,
             data: 'alias_domain'
@@ -990,17 +1009,7 @@ jQuery(function($){
           },
           {
             title: lang.action,
-            data: null,
+            data: 'action'
-            render: function (data, type) {
-              return `<div class="btn-group">
-                <a href="/edit/admin/admin" class="btn btn-xs btn-xs-half btn-secondary">
-                  <i class="bi bi-pencil-fill"></i> Bearbeiten
-                </a>
-                <a href="#" data-action="delete_selected" data-id="single-admin" data-api-url="delete/admin" data-item="admin" class="btn btn-xs btn-xs-half btn-danger">
-                  <i class="bi bi-trash"></i> Entfernen
-                </a>
-              </div>`;
-            }
           },
       ]
     });
@@ -1055,6 +1064,18 @@ jQuery(function($){
         }
       },
       columns: [
+          {
+            // placeholder, so checkbox will not block child row toggle
+            title: '',
+            data: null,
+            searchable: false,
+            orderable: false,
+            defaultContent: ''
+          },
+          {
+            title: '',
+            data: 'chkbox'
+          },
           {
             title: 'ID',
             data: 'id'
@@ -1100,17 +1121,7 @@ jQuery(function($){
           },
           {
             title: lang.action,
-            data: null,
+            data: 'action'
-            render: function (data, type) {
-              return `<div class="btn-group">
-                <a href="/edit/admin/admin" class="btn btn-xs btn-xs-half btn-secondary">
-                  <i class="bi bi-pencil-fill"></i> Bearbeiten
-                </a>
-                <a href="#" data-action="delete_selected" data-id="single-admin" data-api-url="delete/admin" data-item="admin" class="btn btn-xs btn-xs-half btn-danger">
-                  <i class="bi bi-trash"></i> Entfernen
-                </a>
-              </div>`;
-            }
           },
       ]
     });
@@ -1144,6 +1155,18 @@ jQuery(function($){
         }
       },
       columns: [
+          {
+            // placeholder, so checkbox will not block child row toggle
+            title: '',
+            data: null,
+            searchable: false,
+            orderable: false,
+            defaultContent: ''
+          },
+          {
+            title: '',
+            data: 'chkbox'
+          },
           {
             title: 'ID',
             data: 'id'
@@ -1170,17 +1193,7 @@ jQuery(function($){
           },
           {
             title: lang.action,
-            data: null,
+            data: 'action'
-            render: function (data, type) {
-              return `<div class="btn-group">
-                <a href="/edit/admin/admin" class="btn btn-xs btn-xs-half btn-secondary">
-                  <i class="bi bi-pencil-fill"></i> Bearbeiten
-                </a>
-                <a href="#" data-action="delete_selected" data-id="single-admin" data-api-url="delete/admin" data-item="admin" class="btn btn-xs btn-xs-half btn-danger">
-                  <i class="bi bi-trash"></i> Entfernen
-                </a>
-              </div>`;
-            }
           },
       ]
     });
@@ -1190,15 +1203,33 @@ jQuery(function($){
     event.stopPropagation();
   })
 
-  draw_domain_table();
+  // detect element visibility changes
-  draw_mailbox_table();
+  function onVisible(element, callback) {
-  draw_resource_table();
+    $(element).ready(function() {
-  draw_alias_table();
+      element_object = document.querySelector(element)
-  draw_aliasdomain_table();
+      new IntersectionObserver((entries, observer) => {
-  draw_sync_job_table();
+        entries.forEach(entry => {
-  draw_filter_table();
+          if(entry.intersectionRatio > 0) {
+            callback(element_object);
+            observer.disconnect();
+          }
+        });
+      }).observe(element_object);
+    });
+  }
+
+  // Load only if the tab is visible
+  onVisible("[id^=tab-domains]", () => draw_domain_table());
+  onVisible("[id^=tab-mailboxes]", () => draw_mailbox_table());
+  onVisible("[id^=tab-resources]", () => draw_resource_table());
+  onVisible("[id^=tab-mbox-aliases]", () => draw_alias_table());
+  onVisible("[id^=tab-domain-aliases]", () => draw_aliasdomain_table());
+  onVisible("[id^=tab-syncjobs]", () => draw_sync_job_table());
+  onVisible("[id^=tab-filters]", () => draw_filter_table());
+  onVisible("[id^=tab-bcc]", () => {
     draw_bcc_table();
     draw_recipient_map_table();
-  draw_tls_policy_table();
+  });
+  onVisible("[id^=tab-tls-policy]", () => draw_tls_policy_table());
 
 });

data/web/templates/admin/tab-config-admins.twig

@@ -2,7 +2,7 @@
     <div class="card mb-4">
       <div class="card-header bg-danger text-white">{{ lang.admin.admin_details }}</div>
       <div class="card-body">
-        <table id="adminstable" class="table table-striped dt-responsive nowrap w-100"></table>
+        <table id="adminstable" class="table table-striped dt-responsive w-100"></table>
         <div class="mass-actions-admin">
           <div class="btn-group">
             <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="admins" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
@@ -224,7 +224,7 @@
   <div class="card mb-4">
     <div class="card-header">{{ lang.admin.domain_admins }}</div>
     <div class="card-body">
-      <table id="domainadminstable" class="table table-striped dt-responsive nowrap w-100"></table>
+      <table id="domainadminstable" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-admin">
         <div class="btn-group">
           <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="domain_admins" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>

data/web/templates/admin/tab-config-fwdhosts.twig

@@ -3,7 +3,7 @@
     <div class="card-header">{{ lang.admin.forwarding_hosts }}</div>
     <div class="card-body">
       <p style="margin-bottom:40px">{{ lang.admin.forwarding_hosts_hint }}</p>
-      <table class="table table-striped table-condensed" id="forwardinghoststable"></table>
+      <table id="forwardinghoststable" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-admin">
         <div class="btn-group btn-group-sm">
           <button type="button" id="toggle_multi_select_all" data-id="fwdhosts" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary">{{ lang.mailbox.toggle_all }}</button>

data/web/templates/admin/tab-config-oauth2.twig

@@ -3,7 +3,7 @@
     <div class="card-header">{{ lang.admin.oauth2_apps }}</div>
     <div class="card-body">
       <p>{{ lang.admin.oauth2_info|raw }}</p>
-      <table class="table table-striped" id="oauth2clientstable"></table>
+      <table id="oauth2clientstable" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-admin">
         <div class="btn-group">
           <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="oauth2_clients" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>

data/web/templates/admin/tab-mailq.twig

@@ -7,7 +7,7 @@
       </div>
     </div>
     <div class="card-body">
-      <table class="table table-striped table-condensed" id="queuetable"></table>
+      <table id="queuetable" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-admin">
         <div class="btn-group">
           <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="mailqitems" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>

data/web/templates/admin/tab-routing.twig

@@ -3,7 +3,7 @@
     <div class="card-header">{{ lang.admin.relayhosts }}</div>
     <div class="card-body">
       <p style="margin-bottom:40px">{{ lang.admin.relayhosts_hint|raw }}</p>
-      <table class="table table-striped table-condensed" id="relayhoststable"></table>
+      <table id="relayhoststable" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-admin">
         <div class="btn-group btn-group-sm">
           <button type="button" id="toggle_multi_select_all" data-id="rlyhosts" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary">{{ lang.mailbox.toggle_all }}</button>

data/web/templates/debug.twig

@@ -116,9 +116,7 @@
             </div>
           </div>
           <div class="card-body">
-            <div class="table-responsive">
+            <table id="postfix_log" class="table table-striped dt-responsive w-100"></table>
-              <table class="table table-striped table-condensed" id="postfix_log"></table>
-            </div>
           </div>
         </div>
       </div>
@@ -133,9 +131,7 @@
             </div>
           </div>
           <div class="card-body">
-            <div class="table-responsive">
+            <table id="ui_logs" class="table table-striped dt-responsive w-100"></table>
-              <table class="table table-striped table-condensed" id="ui_logs"></table>
-            </div>
           </div>
         </div>
       </div>
@@ -150,9 +146,7 @@
             </div>
           </div>
           <div class="card-body">
-            <div class="table-responsive">
+            <table id="sasl_logs" class="table table-striped dt-responsive w-100"></table>
-              <table class="table table-striped table-condensed" id="sasl_logs"></table>
-            </div>
           </div>
         </div>
       </div>
@@ -167,9 +161,7 @@
             </div>
           </div>
           <div class="card-body">
-            <div class="table-responsive">
+            <table id="dovecot_log" class="table table-striped dt-responsive w-100"></table>
-              <table class="table table-striped table-condensed" id="dovecot_log"></table>
-            </div>
           </div>
         </div>
       </div>
@@ -184,9 +176,7 @@
             </div>
           </div>
           <div class="card-body">
-            <div class="table-responsive">
+            <table id="sogo_log" class="table table-striped dt-responsive w-100"></table>
-              <table class="table table-striped table-condensed" id="sogo_log"></table>
-            </div>
           </div>
         </div>
       </div>
@@ -201,9 +191,7 @@
             </div>
           </div>
           <div class="card-body">
-            <div class="table-responsive">
+            <table id="netfilter_log" class="table table-striped dt-responsive w-100"></table>
-              <table class="table table-striped table-condensed" id="netfilter_log"></table>
-            </div>
           </div>
         </div>
       </div>
@@ -223,9 +211,7 @@
               <canvas id="rspamd_donut" style="width:100%;height:400px"></canvas>
             </div>
             <legend>{{ lang.debug.history_all_servers }}</legend><hr />
-            <div class="table-responsive">
+            <table id="rspamd_history" class="table table-striped dt-responsive w-100"></table>
-              <table class="table table-striped table-condensed log-table" id="rspamd_history"></table>
-            </div>
           </div>
         </div>
       </div>
@@ -240,9 +226,7 @@
             </div>
           </div>
           <div class="card-body">
-            <div class="table-responsive">
+            <table id="autodiscover_log" class="table table-striped dt-responsive w-100"></table>
-              <table class="table table-striped table-condensed" id="autodiscover_log"></table>
-            </div>
           </div>
         </div>
       </div>
@@ -257,9 +241,7 @@
             </div>
           </div>
           <div class="card-body">
-            <div class="table-responsive">
+            <table id="watchdog_log" class="table table-striped dt-responsive w-100"></table>
-              <table class="table table-striped table-condensed" id="watchdog_log"></table>
-            </div>
           </div>
         </div>
       </div>
@@ -274,9 +256,7 @@
             </div>
           </div>
           <div class="card-body">
-            <div class="table-responsive">
+            <table id="acme_log" class="table table-striped dt-responsive w-100"></table>
-              <table class="table table-striped table-condensed" id="acme_log"></table>
-            </div>
           </div>
         </div>
       </div>
@@ -291,9 +271,7 @@
             </div>
           </div>
           <div class="card-body">
-            <div class="table-responsive">
+            <table id="api_log" class="table table-striped dt-responsive w-100"></table>
-              <table class="table table-striped table-condensed" id="api_log"></table>
-            </div>
           </div>
         </div>
       </div>
@@ -309,9 +287,8 @@
           </div>
           <div class="card-body">
             <p class="text-muted">{{ lang.admin.hash_remove_info }}</p>
+            <table id="rl_log" class="table table-striped dt-responsive w-100"></table>
             <div class="table-responsive">
-              <table class="table table-striped table-condensed" id="rl_log"></table>
-            </div>
           </div>
         </div>
       </div>

data/web/templates/mailbox/tab-bcc.twig

@@ -10,7 +10,7 @@
     <div class="card-body">
       <p class="text-muted">{{ lang.mailbox.bcc_info|raw }}</p>
       {#<div class="mass-actions-mailbox" data-actions-header="true"></div>#}
-      <table id="bcc_table" class="table table-striped dt-responsive nowrap w-100"></table>
+      <table id="bcc_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox">
         <div class="btn-group" data-acl="{{ acl.bcc_maps }}">
           <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="bcc" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
@@ -40,7 +40,7 @@
     <div class="card-body">
       <p class="text-muted">{{ lang.mailbox.recipient_map_info }}</p>
       {#<div class="mass-actions-mailbox" data-actions-header="true"></div>#}
-      <table class="table table-striped" id="recipient_map_table"></table>
+      <table id="recipient_map_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox">
         <div class="btn-group">
           <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="recipient_map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>

data/web/templates/mailbox/tab-domain-aliases.twig

@@ -9,7 +9,7 @@
     </div>
     <div class="card-body">
       {#<div class="mass-actions-mailbox" data-actions-header="true"></div>#}
-      <table id="aliasdomain_table" class="table table-striped dt-responsive nowrap w-100"></table>
+      <table id="aliasdomain_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox">
         <div class="btn-group">
           <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="alias-domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>

data/web/templates/mailbox/tab-domains.twig

@@ -11,7 +11,7 @@
     </div>
     <div class="card-body">
       {#<div class="mass-actions-mailbox" data-actions-header="true"></div>#}
-      <table id="domain_table" class="table table-striped dt-responsive nowrap w-100"></table>
+      <table id="domain_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox">
         <div class="btn-group">
           <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="domain" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>

data/web/templates/mailbox/tab-filters.twig

@@ -10,7 +10,7 @@
     <div class="card-body">
       <p class="text-muted">{{ lang.mailbox.sieve_info|raw }}</p><br>
       {#<div class="mass-actions-mailbox" data-actions-header="true"></div>#}
-      <table id="filter_table" class="table table-striped dt-responsive nowrap w-100"></table>
+      <table id="filter_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox">
         <div class="btn-group" data-acl="{{ acl.filters }}">
           <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="filter_item" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>

data/web/templates/mailbox/tab-mailboxes.twig

@@ -9,7 +9,7 @@
     </div>
     <div class="card-body">
       <div class="mass-actions-mailbox d-none d-sm-flex" data-actions-header="true"></div>
-      <table id="mailbox_table" class="table table-striped dt-responsive nowrap w-100"></table>
+      <table id="mailbox_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox">
         <div class="btn-group d-block d-md-none">
           <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>

data/web/templates/mailbox/tab-mbox-aliases.twig

@@ -10,7 +10,7 @@
     <div class="card-body">
       <p class="text-muted">{{ lang.mailbox.alias_domain_alias_hint|raw }}</p>
       <!-- <div class="mass-actions-mailbox" data-actions-header="true"></div> -->
-      <table id="alias_table" class="table table-striped dt-responsive nowrap w-100"></table>
+      <table id="alias_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox">
         <div class="btn-group">
           <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="alias" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>

data/web/templates/mailbox/tab-resources.twig

@@ -12,7 +12,7 @@
       <p><span class="badge fs-5 bg-warning text-muted">{{ lang.mailbox.booking_lt0_short }}</span> - {{ lang.mailbox.booking_ltnull }}</p>
       <p><span class="badge fs-5 bg-danger text-muted">{{ lang.mailbox.booking_custom_short }}</span> - {{ lang.mailbox.booking_custom }}</p>
       {#<div class="mass-actions-mailbox" data-actions-header="true"></div>#}
-      <table id="resource_table" class="table table-striped dt-responsive nowrap w-100"></table>
+      <table id="resource_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox">
         <div class="btn-group">
           <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="resource" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>

data/web/templates/mailbox/tab-syncjobs.twig

@@ -9,7 +9,7 @@
     </div>
     <div class="card-body">
       <!-- <div class="mass-actions-mailbox" data-actions-header="true"></div> -->
-      <table id="sync_job_table" class="table table-striped dt-responsive nowrap w-100"></table>
+      <table id="sync_job_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox">
         <div class="btn-group" data-acl="{{ acl.syncjobs }}">
           <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="syncjob" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>

data/web/templates/mailbox/tab-tls-policy.twig

@@ -10,7 +10,7 @@
     <div class="card-body">
       <p class="text-muted">{{ lang.mailbox.tls_policy_maps_info|raw }}</p>
       {#<div class="mass-actions-mailbox" data-actions-header="true"></div>#}
-      <table id="tls_policy_table" class="table table-striped dt-responsive nowrap w-100"></table>
+      <table id="tls_policy_table" class="table table-striped dt-responsive w-100"></table>
       <div class="mass-actions-mailbox">
         <div class="btn-group">
           <a class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary" id="toggle_multi_select_all" data-id="tls-policy-map" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>