From 18444bd2843a62adb89be6c78956667d9706cdc5 Mon Sep 17 00:00:00 2001
From: FreddleSpl0it <patschul@posteo.de>
Date: Tue, 28 Jun 2022 07:21:26 +0200
Subject: [PATCH] [BS5] fix minor issues

---
 data/web/css/build/013-mailcow.css          |  43 ++++++
 data/web/inc/ajax/dns_diagnostics.php       |   2 +-
 data/web/js/build/004-bootstrap-select.js   |   2 +-
 data/web/js/build/012-api.js                |   2 +-
 data/web/templates/edit.twig                |   2 +-
 data/web/templates/edit/admin.twig          |  10 +-
 data/web/templates/edit/alias.twig          |  12 +-
 data/web/templates/edit/aliasdomain.twig    |  26 ++--
 data/web/templates/edit/app-passwd.twig     |  12 +-
 data/web/templates/edit/bcc.twig            |   8 +-
 data/web/templates/edit/domain.twig         |  30 ++--
 data/web/templates/edit/domainadmin.twig    |  30 ++--
 data/web/templates/edit/filter.twig         |  10 +-
 data/web/templates/edit/mailbox.twig        | 150 ++++++++------------
 data/web/templates/edit/oauth2client.twig   |   8 +-
 data/web/templates/edit/recipient_map.twig  |   8 +-
 data/web/templates/edit/relayhost.twig      |  10 +-
 data/web/templates/edit/resource.twig       |   8 +-
 data/web/templates/edit/syncjob.twig        |  42 +++---
 data/web/templates/edit/tls_policy_map.twig |  10 +-
 data/web/templates/edit/transport.twig      |  14 +-
 data/web/templates/mailbox/tab-filters.twig |   2 +-
 data/web/templates/user/tab-user-auth.twig  |   2 +-
 23 files changed, 226 insertions(+), 217 deletions(-)

diff --git a/data/web/css/build/013-mailcow.css b/data/web/css/build/013-mailcow.css
index a06d97ed..633b87f1 100644
--- a/data/web/css/build/013-mailcow.css
+++ b/data/web/css/build/013-mailcow.css
@@ -327,3 +327,46 @@ table.dataTable>tbody>tr.child ul.dtr-details>li {
   align-items: center;
   display: inline-flex;
 }
+#dnstable {
+  overflow-x: auto!important;
+}
+.well {
+  border: 1px solid #dfdfdf;
+  background-color: #f9f9f9;
+  padding: 10px;
+}
+
+
+table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before:hover, 
+table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before:hover {
+  background-color: #cfcfcf;
+}
+table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, 
+table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
+  background-color: #cfcfcf !important;
+  border: 1.5px solid #616161 !important;
+  border-radius: 5px !important;
+  color: #616161;
+  height: 1.25em;
+  width: 1.25em;
+  line-height: 1.25em;
+  border-radius: 0px;
+  box-shadow: none;
+  font-size: 14px;
+  transition: 0.5s all;
+}
+table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before, 
+table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
+  background-color: #f0f0f0 !important;
+}
+table.dataTable.dtr-inline.collapsed>tbody>tr>td.child, 
+table.dataTable.dtr-inline.collapsed>tbody>tr>th.child, 
+table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty {
+  background-color: #fbfbfb;
+}
+table.dataTable.table-striped>tbody>tr>td {
+  vertical-align: middle;
+}
+table.dataTable.table-striped>tbody>tr>td>input[type="checkbox"] {
+  margin-top: 7px;
+}
\ No newline at end of file
diff --git a/data/web/inc/ajax/dns_diagnostics.php b/data/web/inc/ajax/dns_diagnostics.php
index 4cfee160..15cb3a30 100644
--- a/data/web/inc/ajax/dns_diagnostics.php
+++ b/data/web/inc/ajax/dns_diagnostics.php
@@ -436,7 +436,7 @@ if (isset($_SESSION['mailcow_cc_role']) && ($_SESSION['mailcow_cc_role'] == "adm
       }
       ?>
     </table>
-    <a id='download-zonefile' class="btn btn-sm btn-default visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline" style="margin-top:10px" data-zonefile="<?=base64_encode($dns_data);?>" download='<?=$_GET['domain'];?>.txt' type='text/csv'>Download</a>
+    <a id='download-zonefile' class="btn btn-sm btn-secondary visible-xs-block visible-sm-inline visible-md-inline visible-lg-inline mb-4" style="margin-top:10px" data-zonefile="<?=base64_encode($dns_data);?>" download='<?=$_GET['domain'];?>.txt' type='text/csv'>Download</a>
     <script>
       var zonefile_dl_link = document.getElementById('download-zonefile');
       var zonefile = atob(zonefile_dl_link.getAttribute('data-zonefile'));
diff --git a/data/web/js/build/004-bootstrap-select.js b/data/web/js/build/004-bootstrap-select.js
index fe063b2e..c32f41ec 100644
--- a/data/web/js/build/004-bootstrap-select.js
+++ b/data/web/js/build/004-bootstrap-select.js
@@ -662,7 +662,7 @@
     MENURIGHT: 'dropdown-menu-right',
     MENULEFT: 'dropdown-menu-left',
     // to-do: replace with more advanced template/customization options
-    BUTTONCLASS: 'btn-default',
+    BUTTONCLASS: 'btn-secondary',
     POPOVERHEADER: 'popover-title',
     ICONBASE: 'glyphicon',
     TICKICON: 'glyphicon-ok'
diff --git a/data/web/js/build/012-api.js b/data/web/js/build/012-api.js
index 763bd97e..b9887940 100644
--- a/data/web/js/build/012-api.js
+++ b/data/web/js/build/012-api.js
@@ -11,7 +11,7 @@ $(document).ready(function() {
     } else {
       var parent_btn_grp = $(elem).parentsUntil(".btn-group").parent();
       if (parent_btn_grp.hasClass('btn-group')) {
-        parent_btn_grp.replaceWith('<button class="btn btn-default btn-sm" disabled>' + lang_footer.loading + '</a>');
+        parent_btn_grp.replaceWith('<button class="btn btn-secondary btn-sm" disabled>' + lang_footer.loading + '</a>');
       }
       $(elem).text(lang_footer.loading);
       $(elem).attr('data-submitted', '1');
diff --git a/data/web/templates/edit.twig b/data/web/templates/edit.twig
index 1d5a4e0e..11d64e82 100644
--- a/data/web/templates/edit.twig
+++ b/data/web/templates/edit.twig
@@ -1,7 +1,7 @@
 {% extends 'base.twig' %}
 
 {% block content %}
-<div class="row">
+<div class="row mb-4">
   <div class="col-md-12">
     <div class="card">
       <div class="card-header">
diff --git a/data/web/templates/edit/admin.twig b/data/web/templates/edit/admin.twig
index 9202868c..8806b068 100644
--- a/data/web/templates/edit/admin.twig
+++ b/data/web/templates/edit/admin.twig
@@ -6,33 +6,33 @@
 <br>
 <form class="form-horizontal" data-id="editadmin" role="form" method="post" autocomplete="off">
   <input type="hidden" value="0" name="active">
-  <div class="row">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="username_new">{{ lang.edit.username }}</label>
     <div class="col-sm-10">
       <input class="form-control" type="text" name="username_new" onkeyup="this.value = this.value.toLowerCase();" required value="{{ admin }}" />
       &rdsh; <kbd>a-z - _ .</kbd>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="password">{{ lang.edit.password }} (<a href="#" class="generate_password">{{ lang.edit.generate }}</a>)</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="" autocomplete="new-password">
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="password2">{{ lang.edit.password_repeat }}</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" class="form-control" name="password2" autocomplete="new-password">
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="disable_tfa"> {{ lang.tfa.disable_tfa }}</label>
diff --git a/data/web/templates/edit/alias.twig b/data/web/templates/edit/alias.twig
index 1a4af751..83a3760c 100644
--- a/data/web/templates/edit/alias.twig
+++ b/data/web/templates/edit/alias.twig
@@ -9,16 +9,16 @@
   {% if not skip_sogo %}
   <input type="hidden" value="0" name="sogo_visible">
   {% endif %}
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="address">{{ lang.edit.alias }}</label>
     <div class="col-sm-10">
       <input class="form-control" type="text" name="address" value="{{ result.address }}" />
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="goto">{{ lang.edit.target_address|raw }}</label>
     <div class="col-sm-10">
-      <textarea id="textarea_alias_goto" class="form-control" autocapitalize="none" autocorrect="off" rows="10" id="goto" name="goto" required>{{ goto|replace({',': ', '}) }}</textarea>
+      <textarea id="textarea_alias_goto" class="form-control mb-4" autocapitalize="none" autocorrect="off" rows="10" id="goto" name="goto" required>{{ goto|replace({',': ', '}) }}</textarea>
       <div class="checkbox">
         <label><input class="goto_checkbox" type="checkbox" value="1" name="goto_null"{% if result.goto == 'null@localhost' %} checked{% endif %}> {{ lang.add.goto_null }}</label>
       </div>
@@ -38,20 +38,20 @@
     </div>
   </div>
   <hr>
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="private_">{{ lang.edit.private_comment }}</label>
     <div class="col-sm-10">
       <input maxlength="160" class="form-control" type="text" name="private_comment" value="{{ result.private_comment }}" />
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="public_comment">{{ lang.edit.public_comment }}</label>
     <div class="col-sm-10">
       <input maxlength="160" class="form-control" type="text" name="public_comment" value="{{ result.public_comment }}" />
     </div>
   </div>
   <hr>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
diff --git a/data/web/templates/edit/aliasdomain.twig b/data/web/templates/edit/aliasdomain.twig
index b78efe50..808d128e 100644
--- a/data/web/templates/edit/aliasdomain.twig
+++ b/data/web/templates/edit/aliasdomain.twig
@@ -5,7 +5,7 @@
 <h4>{{ lang.edit.edit_alias_domain }}</h4>
 <form class="form-horizontal" data-id="editaliasdomain" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="target_domain">{{ lang.edit.target_domain }}</label>
     <div class="col-sm-10">
       <select class="full-width-select" data-live-search="true" id="addSelectDomain" name="target_domain" required>
@@ -15,14 +15,14 @@
       </select>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editaliasdomain" data-item="{{ alias_domain }}" data-api-url='edit/alias-domain' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
@@ -30,18 +30,12 @@
 </form>
 <hr>
 <form data-id="domratelimit" class="form-inline well" method="post">
-  <div class="row">
-    <label class="control-label">{{ lang.acl.ratelimit }}</label>
-    <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
-  </div>
-  <div class="row">
-    <select name="rl_frame" class="form-control">
-      {% include 'mailbox/rl-frame.twig' %}
-    </select>
-  </div>
-  <div class="row">
-    <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="domratelimit" data-item="{{ alias_domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
-  </div>
+  <label class="control-label mb-2">{{ lang.acl.ratelimit }}</label>
+  <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+  <select name="rl_frame" class="form-control">
+    {% include 'mailbox/rl-frame.twig' %}
+  </select>
+  <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="domratelimit" data-item="{{ alias_domain }}" data-api-url='edit/rl-domain' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
 </form>
 {% if dkim %}
 <hr>
@@ -50,7 +44,7 @@
     <p>Domain: <strong>{{ result.alias_domain }}</strong> ({{ dkim.dkim_selector }}._domainkey)</p>
   </div>
   <div class="col-12 col-sm-10">
-    <pre>{{ dkim.dkim_txt }}</pre>
+    <pre class="p-2">{{ dkim.dkim_txt }}</pre>
   </div>
 </div>
 {% endif %}
diff --git a/data/web/templates/edit/app-passwd.twig b/data/web/templates/edit/app-passwd.twig
index 5b795595..fcd9d049 100644
--- a/data/web/templates/edit/app-passwd.twig
+++ b/data/web/templates/edit/app-passwd.twig
@@ -6,32 +6,32 @@
 <form class="form-horizontal" data-pwgen-length="32" data-id="editapp" role="form" method="post">
   <input type="hidden" value="0" name="active">
   <input type="hidden" value="0" name="protocols">
-  <div class="row">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="app_name">{{ lang.edit.app_name }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="app_name" id="app_name" value="{{ result.name }}" required maxlength="255">
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="password">{{ lang.edit.password }} (<a href="#" class="generate_password">{{ lang.edit.generate }}</a>)</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="" autocomplete="new-password">
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="password2">{{ lang.edit.password_repeat }}</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" class="form-control" name="password2" autocomplete="new-password">
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="protocols">{{ lang.edit.app_passwd_protocols }}</label>
     <div class="col-sm-10">
       <select class="full-width-select" data-live-search="true" id="protocols" name="protocols" multiple>
@@ -44,7 +44,7 @@
       </select>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editapp" data-item="{{ result.id }}" data-api-url='edit/app-passwd' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
diff --git a/data/web/templates/edit/bcc.twig b/data/web/templates/edit/bcc.twig
index 4ae50c0c..f7d0c5ca 100644
--- a/data/web/templates/edit/bcc.twig
+++ b/data/web/templates/edit/bcc.twig
@@ -6,14 +6,14 @@
 <br>
 <form class="form-horizontal" data-id="editbcc" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="bcc_dest">{{ lang.mailbox.bcc_destination }}</label>
     <div class="col-sm-10">
       <input value="{{ result.bcc_dest }}" type="text" class="form-control" name="bcc_dest" id="bcc_dest">
       <small>{{ lang.edit.bcc_dest_format|raw }}</small>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="type">{{ lang.mailbox.bcc_map_type }}</label>
     <div class="col-sm-10">
       <select id="addFilterType" name="type" id="type" required>
@@ -22,14 +22,14 @@
       </select>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editbcc" data-item="{{ bcc }}" data-api-url='edit/bcc' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
diff --git a/data/web/templates/edit/domain.twig b/data/web/templates/edit/domain.twig
index 81d04d6e..c7103290 100644
--- a/data/web/templates/edit/domain.twig
+++ b/data/web/templates/edit/domain.twig
@@ -17,13 +17,13 @@
       <input type="hidden" value="0" name="gal">
       <input type="hidden" value="0" name="relay_all_recipients">
       <input type="hidden" value="0" name="relay_unknown_only">
-      <div class="row" data-acl="{{ acl.domain_desc }}">
+      <div class="row mb-2" data-acl="{{ acl.domain_desc }}">
         <label class="control-label col-sm-2" for="description">{{ lang.edit.description }}</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" name="description" value="{{ result.description }}">
         </div>
       </div>
-      <div class="row">
+      <div class="row mb-4">
         <label class="control-label col-sm-2">{{ lang.add.tags }}</label>
         <div class="col-sm-10">
           <div class="form-control tag-box">
@@ -39,7 +39,7 @@
           </div>
         </div>
       </div>
-      <div class="row">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="relayhost">{{ lang.edit.relayhost }}</label>
         <div class="col-sm-10">
           <select data-acl="{{ acl.domain_relayhost }}" data-live-search="true" id="relayhost" name="relayhost" class="form-control">
@@ -58,37 +58,37 @@
         </div>
       </div>
       {% if mailcow_cc_role == 'admin' %}
-      <div class="row">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="aliases">{{ lang.edit.max_aliases }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="aliases" value="{{ result.max_num_aliases_for_domain }}">
         </div>
       </div>
-      <div class="row">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="mailboxes">{{ lang.edit.max_mailboxes }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="mailboxes" value="{{ result.max_num_mboxes_for_domain }}">
         </div>
       </div>
-      <div class="row">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="defquota">{{ lang.edit.mailbox_quota_def }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="defquota" value="{{ (result.def_quota_for_mbox / 1048576) }}">
         </div>
       </div>
-      <div class="row">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="maxquota">{{ lang.edit.max_quota }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="maxquota" value="{{ (result.max_quota_for_mbox / 1048576) }}">
         </div>
       </div>
-      <div class="row">
+      <div class="row mb-4">
         <label class="control-label col-sm-2" for="quota">{{ lang.edit.domain_quota }}</label>
         <div class="col-sm-10">
           <input type="number" class="form-control" name="quota" value="{{ (result.max_quota_for_domain / 1048576) }}">
         </div>
       </div>
-      <div class="row">
+      <div class="row mb-2">
         <label class="control-label col-sm-2">{{ lang.edit.backup_mx_options }}</label>
         <div class="col-sm-10">
           <div class="checkbox">
@@ -113,7 +113,7 @@
         </div>
       </div>
       <hr>
-      <div class="row">
+      <div class="row mb-2">
         <div class="offset-sm-2 col-sm-10">
           <div class="checkbox">
             <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}{% if mailcow_cc_role != 'admin' %} disabled{% endif %}> {{ lang.edit.active }}</label>
@@ -133,7 +133,7 @@
         <p>Domain: <strong>{{ result.domain_name }}</strong> ({{ dkim.dkim_selector }}._domainkey)</p>
       </div>
       <div class="col-12 col-sm-10">
-        <pre>{{ dkim.dkim_txt }}</pre>
+        <pre class="p-2">{{ dkim.dkim_txt }}</pre>
       </div>
     </div>
     {% endif %}
@@ -142,8 +142,8 @@
     <form data-id="domratelimit" class="form-inline well" method="post">
       <div class="row">
         <div class="col-12">
-          <label class="control-label">{{ lang.edit.ratelimit }}</label>
-          <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
+          <label class="control-label mb-2">{{ lang.edit.ratelimit }}</label>
+          <input name="rl_value" type="number" value="{{ rl.value }}" autocomplete="off" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
           <select name="rl_frame" class="form-control">
             {% include 'mailbox/rl-frame.twig' %}
           </select>
@@ -201,13 +201,13 @@
         <p>{{ lang.edit.quota_warning_bcc_info|raw }}</p>
         <form class="form-horizontal" data-id="quota_bcc">
           <input type="hidden" value="0" name="active">
-          <div class="row">
+          <div class="row mb-2">
             <label class="control-label col-sm-2" for="script_data">{{ lang.edit.target_address|raw }}:</label>
             <div class="col-sm-10">
               <textarea spellcheck="false" autocorrect="off" autocapitalize="none" class="form-control" rows="10" id="bcc_rcpt" name="bcc_rcpt">{{ quota_notification_bcc.bcc_rcpts|join("\n") }}</textarea>
             </div>
           </div>
-          <div class="row">
+          <div class="row mb-4">
             <div class="offset-sm-2 col-sm-10">
               <div class="checkbox">
                 <label><input type="checkbox" value="1" name="active"{% if quota_notification_bcc.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
diff --git a/data/web/templates/edit/domainadmin.twig b/data/web/templates/edit/domainadmin.twig
index f5c99c54..d241fa53 100644
--- a/data/web/templates/edit/domainadmin.twig
+++ b/data/web/templates/edit/domainadmin.twig
@@ -6,14 +6,14 @@
 <br>
 <form class="form-horizontal" data-id="editdomainadmin" role="form" method="post" autocomplete="off">
   <input type="hidden" value="0" name="active">
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="username_new">{{ lang.edit.username }}</label>
     <div class="col-sm-10">
       <input class="form-control" type="text" name="username_new" value="{{ domain_admin }}" required onkeyup="this.value = this.value.toLowerCase();" />
       &rdsh; <kbd>a-z - _ .</kbd>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="domains">{{ lang.edit.domains }}</label>
     <div class="col-sm-10">
       <select data-live-search="true" class="full-width-select" name="domains" multiple required>
@@ -26,33 +26,33 @@
       </select>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="password">{{ lang.edit.password }} (<a href="#" class="generate_password">{{ lang.edit.generate }}</a>)</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="" autocomplete="new-password">
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="password2">{{ lang.edit.password_repeat }}</label>
     <div class="col-sm-10">
       <input type="password" data-pwgen-field="true" class="form-control" name="password2" autocomplete="new-password">
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="disable_tfa"> {{ lang.tfa.disable_tfa }}</label>
       </div>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-api-reload-location="/admin" data-id="editdomainadmin" data-item="{{ domain_admin }}" data-api-url='edit/domain-admin' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
@@ -64,16 +64,12 @@
       <p class="text-muted">ACL</p>
     </div>
     <div class="col-sm-10">
-      <div class="row">
-        <select id="da_acl" name="da_acl" size="10" data-container="body" multiple>
-          {% for acl, val in da_acls %}
-          <option value="{{ acl }}"{% if val == 1 %} selected{% endif %}>{{ lang.acl[acl] }}</option>
-          {% endfor %}
-        </select>
-      </div>
-      <div class="row">
-        <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="daacl" data-item="{{ domain_admin }}" data-api-url='edit/da-acl' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
-      </div>
+      <select class="mb-2" id="da_acl" name="da_acl" size="10" data-container="body" multiple>
+        {% for acl, val in da_acls %}
+        <option value="{{ acl }}"{% if val == 1 %} selected{% endif %}>{{ lang.acl[acl] }}</option>
+        {% endfor %}
+      </select>
+      <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary mb-2" data-action="edit_selected" data-id="daacl" data-item="{{ domain_admin }}" data-api-url='edit/da-acl' data-api-attr='{}' href="#">{{ lang.admin.save }}</button>
     </div>
   </div>
 </form>
diff --git a/data/web/templates/edit/filter.twig b/data/web/templates/edit/filter.twig
index df01265e..ff4ac4ee 100644
--- a/data/web/templates/edit/filter.twig
+++ b/data/web/templates/edit/filter.twig
@@ -5,13 +5,13 @@
 <h4>Filter</h4>
 <form class="form-horizontal" data-id="editfilter" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="script_desc">{{ lang.edit.sieve_desc }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="script_desc" id="script_desc" value="{{ result.script_desc }}" required maxlength="255">
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="filter_type">{{ lang.edit.sieve_type }}</label>
     <div class="col-sm-10">
       <select id="addFilterType" name="filter_type" id="filter_type" required>
@@ -20,20 +20,20 @@
       </select>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="script_data">Script:</label>
     <div class="col-sm-10">
       <textarea spellcheck="false" autocorrect="off" autocapitalize="none" class="form-control textarea-code" rows="20" id="script_data" name="script_data" required>{{ result.script_data|raw }}</textarea>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editfilter" data-item="{{ result.id }}" data-api-url='edit/filter' data-api-attr='{}' href="#">{{ lang.edit.validate_save }}</button>
     </div>
diff --git a/data/web/templates/edit/mailbox.twig b/data/web/templates/edit/mailbox.twig
index f8ec91f8..a503a151 100644
--- a/data/web/templates/edit/mailbox.twig
+++ b/data/web/templates/edit/mailbox.twig
@@ -16,13 +16,13 @@
       <input type="hidden" value="0" name="force_pw_update">
       <input type="hidden" value="0" name="sogo_access">
       <input type="hidden" value="0" name="protocol_access">
-      <div class="row">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="name">{{ lang.edit.full_name }}</label>
         <div class="col-sm-10">
           <input type="text" class="form-control" name="name" value="{{ result.name }}">
         </div>
       </div>
-      <div class="row">
+      <div class="row mb-4">
         <label class="control-label col-sm-2">{{ lang.add.tags }}</label>
         <div class="col-sm-10">
           <div class="form-control tag-box">
@@ -38,7 +38,7 @@
           </div>
         </div>
       </div>
-      <div class="row">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="quota">{{ lang.edit.quota_mb }}
           <br><span id="quotaBadge" class="badge">max. {{ (result.max_new_quota / 1048576) }} MiB</span>
         </label>
@@ -47,7 +47,7 @@
           <small class="text-muted">0 = ∞</small>
         </div>
       </div>
-      <div class="row">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="sender_acl">{{ lang.edit.sender_acl }}</label>
         <div class="col-sm-10">
           <select data-live-search="true" data-width="100%" style="width:100%" id="editSelectSenderACL" name="sender_acl" size="10" multiple>
@@ -82,10 +82,10 @@
             {% endfor %}
           </select>
           <div id="sender_acl_disabled"><i class="bi bi-shield-exclamation"></i> {{ lang.edit.sender_acl_disabled|raw }}</div>
-          <small class="text-muted">{{ lang.edit.sender_acl_info|raw }}</small>
+          <small class="text-muted d-block">{{ lang.edit.sender_acl_info|raw }}</small>
         </div>
       </div>
-      <div class="row">
+      <div class="row mb-2">
         <label class="control-label col-sm-2" for="relayhost">{{ lang.edit.relayhost }}</label>
         <div class="col-sm-10">
           <select data-acl="{{ acl.mailbox_relayhost }}" data-live-search="true" id="relayhost" name="relayhost" class="form-control mb-4">
@@ -102,10 +102,10 @@
             </option>
           </select>
           <p class="d-block d-sm-none" style="margin: 0;padding: 0">&nbsp;</p>
-          <small class="text-muted">{{ lang.edit.mailbox_relayhost_info }}</small>
+          <small class="text-muted d-block">{{ lang.edit.mailbox_relayhost_info }}</small>
         </div>
       </div>
-      <div class="row">
+      <div class="row mb-2">
         <label class="control-label col-sm-2">{{ lang.user.quarantine_notification }}</label>
         <div class="col-sm-10">
           <div class="btn-group" data-acl="{{ acl.quarantine_notification }}">
@@ -137,7 +137,7 @@
           <p class="text-muted"><small>{{ lang.user.quarantine_notification_info }}</small></p>
         </div>
       </div>
-      <div class="row">
+      <div class="row mb-2">
         <label class="control-label col-sm-2">{{ lang.user.quarantine_category }}</label>
         <div class="col-sm-10">
           <div class="btn-group" data-acl="{{ acl.quarantine_category }}">
@@ -163,7 +163,7 @@
           <p class="text-muted"><small>{{ lang.user.quarantine_category_info }}</small></p>
         </div>
       </div>
-      <div class="row">
+      <div class="row mb-4">
         <label class="control-label col-sm-2" for="sender_acl">{{ lang.user.tls_policy }}</label>
         <div class="col-sm-10">
           <div class="btn-group" data-acl="{{ acl.tls_policy }}">
@@ -188,13 +188,13 @@
           <input type="password" data-pwgen-field="true" data-hibp="true" class="form-control" name="password" placeholder="{{ lang.edit.unchanged_if_empty }}" autocomplete="new-password">
         </div>
       </div>
-      <div class="row">
+      <div class="row mb-4">
         <label class="control-label col-sm-2" for="password2">{{ lang.edit.password_repeat }}</label>
         <div class="col-sm-10">
           <input type="password" data-pwgen-field="true" class="form-control" name="password2" autocomplete="new-password">
         </div>
       </div>
-      <div data-acl="{{ acl.extend_sender_acl }}" class="row">
+      <div data-acl="{{ acl.extend_sender_acl }}" class="row mb-4">
         <label class="control-label col-sm-2" for="extended_sender_acl">{{ lang.edit.extended_sender_acl }}</label>
         <div class="col-sm-10">
           {% if sender_acl_handles.external_sender_aliases %}
@@ -270,60 +270,46 @@
           <p class="text-muted">{{ lang.user.pushover_info|format(mailbox)|raw }}</p>
           <p class="text-muted">{{ lang.edit.pushover_vars|raw }}: <code>{SUBJECT}</code>, <code>{SENDER}</code></p>
           <div class="row">
-            <div class="row">
-              <div class="col-sm-6">
-                <div class="row">
-                  <label for="token">API Token/Key (Application)</label>
-                  <input type="text" class="form-control" name="token" maxlength="30" value="{{ pushover_data.token }}" required>
+            <div class="col-sm-6 mb-2">
+              <label for="token">API Token/Key (Application)</label>
+              <input type="text" class="form-control" name="token" maxlength="30" value="{{ pushover_data.token }}" required>
+            </div>
+            <div class="col-sm-6 mb-2">
+              <label for="key">User/Group Key</label>
+              <input type="text" class="form-control" name="key" maxlength="30" value="{{ pushover_data.key }}" required>
+            </div>
+            <div class="col-sm-6 mb-4">
+              <label for="title">{{ lang.edit.pushover_title }}</label>
+              <input type="text" class="form-control" name="title" value="{{ pushover_data.title }}" placeholder="Mail">
+            </div>
+            <div class="col-sm-6 mb-4">
+              <label for="text">{{ lang.edit.pushover_text }}</label>
+              <input type="text" class="form-control" name="text" value="{{ pushover_data.text }}" placeholder="You've got mail 📧">
+            </div>
+            <div class="col-sm-12 mb-4">
+              <label for="text">{{ lang.edit.pushover_sender_array|raw }}</label>
+              <input type="text" class="form-control" name="senders" value="{{ pushover_data.senders }}" placeholder="sender1@example.com, sender2@example.com">
+            </div>
+            <div class="col-sm-12 mb-2">
+              <div class="checkbox">
+                <label><input type="checkbox" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
+              </div>
+            </div>
+            <div class="col-sm-12">
+              <legend style="cursor:pointer;margin-top:10px" data-bs-target="#po_advanced" unselectable="on" data-bs-toggle="collapse">
+                <i class="bi bi-plus"></i> {{ lang.edit.advanced_settings }}
+              </legend>
+              <hr />
+            </div>
+            <div class="col-sm-12 mb-4">
+              <div id="po_advanced" class="collapse">
+                <label for="text">{{ lang.edit.pushover_sender_regex }}</label>
+                <input type="text" class="form-control mt-2" name="senders_regex" value="{{ pushover_data.senders_regex }}" placeholder="/(.*@example\.org$|^foo@example\.com$)/i" regex="true">
+                <div class="checkbox mt-4">
+                  <label><input type="checkbox" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_evaluate_x_prio|raw }}</label>
                 </div>
-              </div>
-              <div class="col-sm-6">
-                <div class="row">
-                  <label for="key">User/Group Key</label>
-                  <input type="text" class="form-control" name="key" maxlength="30" value="{{ pushover_data.key }}" required>
-                </div>
-              </div>
-              <div class="col-sm-6">
-                <div class="row">
-                  <label for="title">{{ lang.edit.pushover_title }}</label>
-                  <input type="text" class="form-control" name="title" value="{{ pushover_data.title }}" placeholder="Mail">
-                </div>
-              </div>
-              <div class="col-sm-6">
-                <div class="row">
-                  <label for="text">{{ lang.edit.pushover_text }}</label>
-                  <input type="text" class="form-control" name="text" value="{{ pushover_data.text }}" placeholder="You've got mail 📧">
-                </div>
-              </div>
-              <div class="col-sm-12">
-                <div class="row">
-                  <label for="text">{{ lang.edit.pushover_sender_array|raw }}</label>
-                  <input type="text" class="form-control" name="senders" value="{{ pushover_data.senders }}" placeholder="sender1@example.com, sender2@example.com">
-                </div>
-              </div>
-              <div class="col-sm-12">
-                <div class="checkbox">
-                  <label><input type="checkbox" value="1" name="active"{% if pushover_data.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
-                </div>
-              </div>
-              <div class="col-sm-12">
-                <legend style="cursor:pointer;margin-top:10px" data-bs-target="#po_advanced" unselectable="on" data-bs-toggle="collapse">
-                  <i class="bi bi-plus"></i> {{ lang.edit.advanced_settings }}
-                </legend>
-                <hr />
-              </div>
-              <div class="col-sm-12">
-                <div id="po_advanced" class="collapse">
-                  <div class="row">
-                    <label for="text">{{ lang.edit.pushover_sender_regex }}</label>
-                    <input type="text" class="form-control" name="senders_regex" value="{{ pushover_data.senders_regex }}" placeholder="/(.*@example\.org$|^foo@example\.com$)/i" regex="true">
-                    <div class="checkbox">
-                      <label><input type="checkbox" value="1" name="evaluate_x_prio"{% if pushover_data.attributes.evaluate_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_evaluate_x_prio|raw }}</label>
-                    </div>
-                    <div class="checkbox">
-                      <label><input type="checkbox" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_only_x_prio|raw }}</label>
-                    </div>
-                  </div>
+                <div class="checkbox mt-2">
+                  <label><input type="checkbox" value="1" name="only_x_prio"{% if pushover_data.attributes.only_x_prio == '1' %} checked{% endif %}> {{ lang.edit.pushover_only_x_prio|raw }}</label>
                 </div>
               </div>
             </div>
@@ -344,16 +330,12 @@
           <p class="text-muted">ACL</p>
         </div>
         <div class="col-sm-10">
-          <div class="row">
-            <select id="user_acl" name="user_acl" size="10" multiple>
-              {% for acl, val in user_acls %}
-                <option value="{{ acl }}"{% if val == 1 %} selected{% endif %}>{{ lang.acl[acl] }}</option>
-              {% endfor %}
-            </select>
-          </div>
-          <div class="row">
-            <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="useracl" data-item="{{ mailbox }}" data-api-url='edit/user-acl' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
-          </div>
+          <select id="user_acl" name="user_acl" size="10" multiple>
+            {% for acl, val in user_acls %}
+              <option value="{{ acl }}"{% if val == 1 %} selected{% endif %}>{{ lang.acl[acl] }}</option>
+            {% endfor %}
+          </select>
+          <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="useracl" data-item="{{ mailbox }}" data-api-url='edit/user-acl' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
         </div>
       </div>
     </form>
@@ -365,18 +347,12 @@
           <p class="text-muted">{{ lang.acl.ratelimit }}</p>
         </div>
         <div class="col-sm-10">
-          <div class="row">
-            <input name="rl_value" type="number" autocomplete="off" value="{{ rl.value }}" class="form-control" placeholder="{{ lang.ratelimit.disabled }}">
-          </div>
-          <div class="row">
-            <select name="rl_frame" class="form-control">
-              {% include 'mailbox/rl-frame.twig' %}
-            </select>
-          </div>
-          <div class="row">
-            <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="mboxratelimit" data-item="{{ mailbox }}" data-api-url='edit/rl-mbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
-          </div>
-          <p class="text-muted">{{ lang.edit.mbox_rl_info }}</p>
+          <input name="rl_value" type="number" autocomplete="off" value="{{ rl.value }}" class="form-control mb-4" placeholder="{{ lang.ratelimit.disabled }}">
+          <select name="rl_frame" class="form-control">
+            {% include 'mailbox/rl-frame.twig' %}
+          </select>
+          <button class="btn btn-xs-lg d-block d-sm-inline btn-secondary" data-action="edit_selected" data-id="mboxratelimit" data-item="{{ mailbox }}" data-api-url='edit/rl-mbox' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
+          <p class="text-muted mt-3">{{ lang.edit.mbox_rl_info }}</p>
         </div>
       </div>
     </form>
diff --git a/data/web/templates/edit/oauth2client.twig b/data/web/templates/edit/oauth2client.twig
index 8290ca15..f3dc4d0d 100644
--- a/data/web/templates/edit/oauth2client.twig
+++ b/data/web/templates/edit/oauth2client.twig
@@ -4,25 +4,25 @@
 {% if result %}
 <h4>OAuth2</h4>
 <form data-id="oauth2client" class="form-horizontal" role="form" method="post">
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="client_id">{{ lang.edit.client_id }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="client_id" id="client_id" value="{{ result.client_id }}" disabled>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="client_secret">{{ lang.edit.client_secret }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="client_secret" id="client_secret" value="{{ result.client_secret }}" disabled>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="scope">{{ lang.edit.scope }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="scope" id="scope" value="{{ result.scope }}" disabled>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="redirect_uri">{{ lang.edit.redirect_uri }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="redirect_uri" id="redirect_uri" value="{{ result.redirect_uri }}">
diff --git a/data/web/templates/edit/recipient_map.twig b/data/web/templates/edit/recipient_map.twig
index a3e59214..9af30a3b 100644
--- a/data/web/templates/edit/recipient_map.twig
+++ b/data/web/templates/edit/recipient_map.twig
@@ -6,28 +6,28 @@
 <br>
 <form class="form-horizontal" data-id="edit_recipient_map" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="recipient_map_new">{{ lang.mailbox.recipient_map_old }}</label>
     <div class="col-sm-10">
       <input value="{{ result.recipient_map_old }}" type="text" class="form-control" name="recipient_map_old" id="recipient_map_old">
       <small>{{ lang.mailbox.recipient_map_old_info }}</small>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="recipient_map_new">{{ lang.mailbox.recipient_map_new }}</label>
     <div class="col-sm-10">
       <input value="{{ result.recipient_map_new }}" type="text" class="form-control" name="recipient_map_new" id="recipient_map_new">
       <small>{{ lang.mailbox.recipient_map_new_info }}</small>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="edit_recipient_map" data-item="{{ map }}" data-api-url='edit/recipient_map' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
diff --git a/data/web/templates/edit/relayhost.twig b/data/web/templates/edit/relayhost.twig
index b7b190fd..c6689816 100644
--- a/data/web/templates/edit/relayhost.twig
+++ b/data/web/templates/edit/relayhost.twig
@@ -5,33 +5,33 @@
 <h4>{{ lang.edit.resource }}</h4>
 <form class="form-horizontal" role="form" method="post" data-id="editrelayhost">
   <input type="hidden" value="0" name="active">
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="hostname">{{ lang.add.hostname }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="hostname" value="{{ result.hostname }}" required>
       <p class="text-muted">{{ lang.add.relayhost_wrapped_tls_info|raw }}</p>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="username">{{ lang.add.username }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="username" value="{{ result.username }}">
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="password">{{ lang.add.password }}</label>
     <div class="col-sm-10">
       <input type="text" data-hibp="true" class="form-control" name="password" value="{{ result.password }}">
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editrelayhost" data-item="{{ result.id }}" data-api-url='edit/relayhost' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
diff --git a/data/web/templates/edit/resource.twig b/data/web/templates/edit/resource.twig
index effdc692..4ba65bd2 100644
--- a/data/web/templates/edit/resource.twig
+++ b/data/web/templates/edit/resource.twig
@@ -5,13 +5,13 @@
 <h4>{{ lang.edit.resource }}</h4>
 <form class="form-horizontal" role="form" method="post" data-id="editresource">
   <input type="hidden" value="0" name="active">
-  <div class="row">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="description">{{ lang.add.description }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="description" value="{{ result.description }}" required>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="domain">{{ lang.edit.kind }}</label>
     <div class="col-sm-10">
       <select name="kind" title="{{ lang.edit.select }}" required>
@@ -21,7 +21,7 @@
       </select>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="multiple_bookings_select">{{ lang.add.multiple_bookings }}</label>
     <div class="col-sm-10">
       <select name="multiple_bookings_select" id="editSelectMultipleBookings" title="{{ lang.add.select }}" required>
@@ -36,7 +36,7 @@
       <input type="hidden" name="multiple_bookings" id="multiple_bookings">
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
diff --git a/data/web/templates/edit/syncjob.twig b/data/web/templates/edit/syncjob.twig
index 570b3873..d2172e64 100644
--- a/data/web/templates/edit/syncjob.twig
+++ b/data/web/templates/edit/syncjob.twig
@@ -11,31 +11,31 @@
     <input type="hidden" value="0" name="skipcrossduplicates">
     <input type="hidden" value="0" name="active">
     <input type="hidden" value="0" name="subscribeall">
-    <div class="row">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="host1">{{ lang.edit.hostname }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="host1" id="host1" value="{{ result.host1 }}">
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-4">
       <label class="control-label col-sm-2" for="port1">Port</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="port1" id="port1" min="1" max="65535" value="{{ result.port1 }}">
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="user1">{{ lang.edit.username }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="user1" id="user1" value="{{ result.user1 }}">
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-4">
       <label class="control-label col-sm-2" for="password1">{{ lang.edit.password }}</label>
       <div class="col-sm-10">
         <input type="password" class="form-control" name="password1" id="password1" value="{{ result.password1 }}">
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="enc1">{{ lang.edit.encryption }}</label>
       <div class="col-sm-10">
         <select id="enc1" name="enc1">
@@ -45,110 +45,110 @@
         </select>
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="mins_interval">{{ lang.edit.mins_interval }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="mins_interval" min="1" max="43800" value="{{ result.mins_interval }}" required>
         <small class="text-muted">1-43800</small>
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="subfolder2">{{ lang.edit.subfolder2|raw }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="subfolder2" id="subfolder2" value="{{ result.subfolder2 }}">
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="maxage">{{ lang.edit.maxage|raw }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="maxage" id="maxage" min="0" max="32000" value="{{ result.maxage }}">
         <small class="text-muted">0-32000</small>
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="maxbytespersecond">{{ lang.edit.maxbytespersecond|raw }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="maxbytespersecond" id="maxbytespersecond" min="0" max="125000000" value="{{ result.maxbytespersecond }}">
         <small class="text-muted">0-125000000</small>
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="timeout1">{{ lang.add.timeout1 }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="timeout1" id="timeout1" min="1" max="32000" value="{{ result.timeout1 }}">
         <small class="text-muted">1-32000</small>
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="timeout2">{{ lang.add.timeout2 }}</label>
       <div class="col-sm-10">
         <input type="number" class="form-control" name="timeout2" id="timeout2" min="1" max="32000" value="{{ result.timeout2 }}">
         <small class="text-muted">1-32000</small>
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-2">
       <label class="control-label col-sm-2" for="exclude">{{ lang.edit.exclude }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="exclude" id="exclude" value="{{ result.exclude }}">
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-4">
       <label class="control-label col-sm-2" for="custom_params">{{ lang.add.custom_params }}</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" name="custom_params" id="custom_params" value="{{ result.custom_params }}" placeholder="--dry --some-param=xy --other-param=yx">
         <small class="text-muted">{{ lang.add.custom_params_hint }}</small>
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="delete2duplicates"{% if result.delete2duplicates == '1' %} checked{% endif %}> {{ lang.edit.delete2duplicates }} (--delete2duplicates)</label>
         </div>
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="delete1"{% if result.delete1 == '1' %} checked{% endif %}> {{ lang.edit.delete1 }} (--delete1)</label>
         </div>
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="delete2"{% if result.delete2 == '1' %} checked{% endif %}> {{ lang.edit.delete2 }} (--delete2)</label>
         </div>
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="automap"{% if result.automap == '1' %} checked{% endif %}> {{ lang.edit.automap }} (--automap)</label>
         </div>
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="skipcrossduplicates"{% if result.skipcrossduplicates == '1' %} checked{% endif %}> {{ lang.edit.skipcrossduplicates }} (--skipcrossduplicates)</label>
         </div>
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="subscribeall"{% if result.subscribeall == '1' %} checked{% endif %}> {{ lang.add.subscribeall }} (--subscribeall)</label>
         </div>
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-4">
       <div class="offset-sm-2 col-sm-10">
         <div class="checkbox">
           <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
         </div>
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-2">
       <div class="offset-sm-2 col-sm-10">
         <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="editsyncjob" data-item="{{ result.id }}" data-api-url='edit/syncjob' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
       </div>
diff --git a/data/web/templates/edit/tls_policy_map.twig b/data/web/templates/edit/tls_policy_map.twig
index a99cdcd1..199bbfef 100644
--- a/data/web/templates/edit/tls_policy_map.twig
+++ b/data/web/templates/edit/tls_policy_map.twig
@@ -6,14 +6,14 @@
 <br>
 <form class="form-horizontal" data-id="edit_tls_policy_maps" role="form" method="post">
   <input type="hidden" value="0" name="active">
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="dest">{{ lang.mailbox.tls_map_dest }}</label>
     <div class="col-sm-10">
       <input value="{{ result.dest }}" type="text" class="form-control" name="dest" id="dest">
       <small>{{ lang.mailbox.tls_map_dest_info }}</small>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="policy">{{ lang.mailbox.tls_map_policy }}</label>
     <div class="col-sm-10">
       <select class="full-width-select" name="policy" required>
@@ -23,21 +23,21 @@
       </select>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="parameters">{{ lang.mailbox.tls_map_parameters }}</label>
     <div class="col-sm-10">
       <input value="{{ result.parameters }}" type="text" class="form-control" name="parameters" id="parameters">
       <small>{{ lang.mailbox.tls_map_parameters_info }}</small>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="edit_tls_policy_maps" data-item="{{ map }}" data-api-url='edit/tls-policy-map' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
diff --git a/data/web/templates/edit/transport.twig b/data/web/templates/edit/transport.twig
index e8fe347f..2fc461f6 100644
--- a/data/web/templates/edit/transport.twig
+++ b/data/web/templates/edit/transport.twig
@@ -6,45 +6,45 @@
 <form class="form-horizontal" role="form" method="post" data-id="edittransport">
   <input type="hidden" value="0" name="active">
   <input type="hidden" value="0" name="is_mx_based">
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="destination">{{ lang.add.destination }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="destination" value="{{ result.destination }}" required>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="nexthop">{{ lang.edit.nexthop }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="nexthop" placeholder='[0.0.0.0], [0.0.0.0]:25, host:25, host, [host]:25' value="{{ result.nexthop }}" required>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <label class="control-label col-sm-2" for="username">{{ lang.add.username }}</label>
     <div class="col-sm-10">
       <input type="text" class="form-control" name="username" value="{{ result.username }}">
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <label class="control-label col-sm-2" for="password">{{ lang.add.password }}</label>
     <div class="col-sm-10">
       <input type="text" data-hibp="true" class="form-control" name="password" value="{{ result.password }}">
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="is_mx_based"{% if result.is_mx_based == '1' %} checked{% endif %}> {{ lang.edit.lookup_mx|raw }}</label>
       </div>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <div class="checkbox">
         <label><input type="checkbox" value="1" name="active"{% if result.active == '1' %} checked{% endif %}> {{ lang.edit.active }}</label>
       </div>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-2">
     <div class="offset-sm-2 col-sm-10">
       <button class="btn btn-xs-lg d-block d-sm-inline btn-success" data-action="edit_selected" data-id="edittransport" data-item="{{ result.id }}" data-api-url='edit/transport' data-api-attr='{}' href="#">{{ lang.edit.save }}</button>
     </div>
diff --git a/data/web/templates/mailbox/tab-filters.twig b/data/web/templates/mailbox/tab-filters.twig
index bafbd8e7..20bfcff8 100644
--- a/data/web/templates/mailbox/tab-filters.twig
+++ b/data/web/templates/mailbox/tab-filters.twig
@@ -31,7 +31,7 @@
           <a class="btn btn-sm d-block d-sm-inline btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addFilterModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_filter }}</a>
         </div>
       </div>
-      <div class="{% if mailcow_cc_role != 'admin' %}hidden{% endif %}">
+      <div class="mt-4 {% if mailcow_cc_role != 'admin' %}hidden{% endif %}">
         <div class="row">
           <div class="col-lg-6">
             <h5>Global Prefilter</h5>
diff --git a/data/web/templates/user/tab-user-auth.twig b/data/web/templates/user/tab-user-auth.twig
index a0d45b67..2371eb06 100644
--- a/data/web/templates/user/tab-user-auth.twig
+++ b/data/web/templates/user/tab-user-auth.twig
@@ -10,7 +10,7 @@
         <div class="hidden-xs col-md-3 col-xs-5 text-right"></div>
         <div class="col-md-3 col-xs-12">
           {% if dual_login and allow_admin_email_login == 'n' or mailboxdata.attributes.force_pw_update == '1' %}
-            <button disabled class="btn btn-default btn-block btn-xs-lg">
+            <button disabled class="btn btn-secondary btn-block btn-xs-lg">
               <i class="bi bi-inbox-fill"></i> {{ lang.user.open_webmail_sso }}
             </button>
           {% else %}