From 5088636d5fe5d8664423026b2ee30199d7f01492 Mon Sep 17 00:00:00 2001
From: FreddleSpl0it <patschul@posteo.de>
Date: Fri, 1 Apr 2022 08:02:11 +0200
Subject: [PATCH] [BS5] change bootstrap responsive

---
 .../templates/admin/tab-config-admins.twig    | 16 +++++-----
 data/web/templates/admin/tab-config-dkim.twig | 10 +++----
 .../templates/admin/tab-config-rspamd.twig    |  6 ++--
 .../admin/tab-globalfilter-regex.twig         |  4 +--
 data/web/templates/debug.twig                 |  2 +-
 data/web/templates/domainadmin.twig           | 18 +++++------
 data/web/templates/edit/aliasdomain.twig      |  4 +--
 data/web/templates/edit/domain.twig           |  8 ++---
 data/web/templates/edit/mailbox.twig          |  4 +--
 data/web/templates/mailbox/tab-bcc.twig       |  4 +--
 .../templates/mailbox/tab-domain-aliases.twig |  2 +-
 data/web/templates/mailbox/tab-domains.twig   |  2 +-
 data/web/templates/mailbox/tab-filters.twig   |  2 +-
 data/web/templates/mailbox/tab-mailboxes.twig |  6 ++--
 .../templates/mailbox/tab-mbox-aliases.twig   |  2 +-
 data/web/templates/mailbox/tab-resources.twig |  2 +-
 data/web/templates/mailbox/tab-syncjobs.twig  |  2 +-
 .../web/templates/mailbox/tab-tls-policy.twig |  2 +-
 data/web/templates/user/SpamAliases.twig      |  2 +-
 data/web/templates/user/Spamfilter.twig       |  4 +--
 data/web/templates/user/tab-user-auth.twig    | 30 +++++++++----------
 data/web/templates/user/tab-user-details.twig | 20 ++++++-------
 .../web/templates/user/tab-user-settings.twig | 24 +++++++--------
 23 files changed, 88 insertions(+), 88 deletions(-)

diff --git a/data/web/templates/admin/tab-config-admins.twig b/data/web/templates/admin/tab-config-admins.twig
index 409771a1..84092fde 100644
--- a/data/web/templates/admin/tab-config-admins.twig
+++ b/data/web/templates/admin/tab-config-admins.twig
@@ -27,16 +27,16 @@
         </legend>
         <hr />
         <div class="row">
-          <div class="col-sm-3 col-xs-5 text-end">{{ lang.tfa.tfa }}:</div>
-          <div class="col-sm-9 col-xs-7">
+          <div class="col-sm-3 col-5 text-end">{{ lang.tfa.tfa }}:</div>
+          <div class="col-sm-9 col-7">
             <p id="tfa_pretty">{{ tfa_data.pretty }}</p>
             {% include 'tfa_keys.twig' %}
             <br>
           </div>
         </div>
         <div class="row">
-          <div class="col-sm-3 col-xs-5 text-end">{{ lang.tfa.set_tfa }}:</div>
-          <div class="col-sm-9 col-xs-7">
+          <div class="col-sm-3 col-5 text-end">{{ lang.tfa.set_tfa }}:</div>
+          <div class="col-sm-9 col-7">
             <select data-style="btn btn-sm dropdown-toggle bs-placeholder btn-secondary" data-width="fit" id="selectTFA" class="selectpicker" title="{{ lang.tfa.select }}">
               <option value="yubi_otp">{{ lang.tfa.yubi_otp }}</option>
               <option value="webauthn">{{ lang.tfa.webauthn }}</option>
@@ -51,8 +51,8 @@
           <i class="bi bi-shield-fill-check"></i>
           {{ lang.fido2.fido2_auth }}</legend><hr />
         <div class="row">
-          <div class="col-sm-3 col-xs-12 text-sm-end text-start space20">{{ lang.fido2.known_ids }}:</div>
-          <div class="col-sm-9 col-xs-12">
+          <div class="col-sm-3 col-12 text-sm-end text-start mb-4">{{ lang.fido2.known_ids }}:</div>
+          <div class="col-sm-9 col-12">
             <div class="table-responsive">
               <table class="table table-striped table-hover table-condensed" id="fido2_keys">
                 <tr>
@@ -79,8 +79,8 @@
         </div>
         <br>
         <div class="row" id="status-fido2">
-          <div class="col-sm-3 col-xs-5 text-end">{{ lang.fido2.register_status }}:</div>
-          <div class="col-sm-9 col-xs-7">
+          <div class="col-sm-3 col-5 text-end">{{ lang.fido2.register_status }}:</div>
+          <div class="col-sm-9 col-7">
             <div id="fido2-alerts">-</div>
           </div>
           <br>
diff --git a/data/web/templates/admin/tab-config-dkim.twig b/data/web/templates/admin/tab-config-dkim.twig
index 638f377f..15b778e7 100644
--- a/data/web/templates/admin/tab-config-dkim.twig
+++ b/data/web/templates/admin/tab-config-dkim.twig
@@ -22,7 +22,7 @@
               <pre>{{ domain_data.dkim.dkim_txt }}</pre>
               <p data-bs-toggle="modal" data-bs-target="#showDKIMprivKey" id="dkim_priv" style="cursor:pointer;margin-top:-8pt" data-priv-key="{{ domain_data.dkim.privkey }}"><small><i class="bi bi-arrow-return-right"></i> {{ lang.admin.dkim_private_key }}</small></p>
             </div>
-            <hr class="visible-xs visible-sm">
+            <hr class="d-block d-md-none">
           </div>
         {% else %}
           <div class="row collapse in dkim_key_missing">
@@ -31,7 +31,7 @@
               <p>{{ lang.admin.domain }}: <strong>{{ domain }}</strong><br><span class="badge fs-5 bg-danger">{{ lang.admin.dkim_key_missing }}</span></p>
             </div>
             <div class="col-md-8"><pre>-</pre></div>
-            <hr class="visible-xs visible-sm">
+            <hr class="d-block d-md-none">
           </div>
         {% endif %}
         {% for alias_domain, alias_domain_data in domain_data.alias_domains %}
@@ -49,7 +49,7 @@
                 <pre>{{ alias_domain_data.dkim.dkim_txt }}</pre>
                 <p data-bs-toggle="modal" data-bs-target="#showDKIMprivKey" id="dkim_priv" style="cursor:pointer;margin-top:-8pt" data-priv-key="{{ alias_domain_data.dkim.privkey }}"><small><i class="bi bi-arrow-return-right"></i> Private key</small></p>
               </div>
-              <hr class="visible-xs visible-sm">
+              <hr class="d-block d-md-none">
             </div>
           {% else %}
             <div class="row collapse in dkim_key_missing">
@@ -58,7 +58,7 @@
                 <p><small>↳ Alias-Domain: <strong>{{ alias_domain }}</strong><br></small><span class="badge fs-5 bg-danger">{{ lang.admin.dkim_key_missing }}</span></p>
               </div>
               <div class="col-md-8"><pre>-</pre></div>
-              <hr class="visible-xs visible-sm">
+              <hr class="d-block d-md-none">
             </div>
           {% endif %}
         {% endfor %}
@@ -77,7 +77,7 @@
             <pre>{{ data.dkim.dkim_txt }}</pre>
             <p data-bs-toggle="modal" data-bs-target="#showDKIMprivKey" id="dkim_priv" style="cursor:pointer;margin-top:-8pt" data-priv-key="{{ data.dkim.privkey }}"><small><i class="bi bi-arrow-return-right"></i> Private key</small></p>
           </div>
-          <hr class="visible-xs visible-sm">
+          <hr class="d-block d-md-none">
         </div>
       {% endfor %}
 
diff --git a/data/web/templates/admin/tab-config-rspamd.twig b/data/web/templates/admin/tab-config-rspamd.twig
index 3ab24db4..251fe58b 100644
--- a/data/web/templates/admin/tab-config-rspamd.twig
+++ b/data/web/templates/admin/tab-config-rspamd.twig
@@ -5,10 +5,10 @@
     </div>
     <div class="card-body">
       <div class="row">
-        <div class="col-xs-12 visible-xs">
+        <div class="col-12 d-block d-sm-none">
           <img class="img-responsive" src="/img/rspamd_logo.png" alt="Rspamd UI">
         </div>
-        <div class="col-sm-9 col-xs-12">
+        <div class="col-sm-9 col-12">
           <form class="form-horizontal" autocapitalize="none" data-id="admin" autocorrect="off" role="form" method="post">
             <div class="form-group">
               <div class="offset-sm-3 col-sm-9">
@@ -36,7 +36,7 @@
             </div>
           </form>
         </div>
-        <div class="col-sm-3 hidden-xs">
+        <div class="col-sm-3 d-none d-sm-block">
           <img class="img-responsive" src="/img/rspamd_logo.png" alt="Rspamd UI">
         </div>
       </div>
diff --git a/data/web/templates/admin/tab-globalfilter-regex.twig b/data/web/templates/admin/tab-globalfilter-regex.twig
index 8be3d439..26239a77 100644
--- a/data/web/templates/admin/tab-globalfilter-regex.twig
+++ b/data/web/templates/admin/tab-globalfilter-regex.twig
@@ -5,7 +5,7 @@
     </div>
     <div class="card-body">
       <p>{{ lang.admin.rspamd_global_filters_info }}</p>
-      <div id="confirm_show_rspamd_global_filters"{% if show_rspamd_global_filters %} class="hidden"{% endif %}>
+      <div id="confirm_show_rspamd_global_filters"{% if show_rspamd_global_filters %} class="d-none"{% endif %}>
         <div class="form-group">
           <div class="offset-sm-2 col-sm-10">
             <label>
@@ -14,7 +14,7 @@
           </div>
         </div>
       </div>
-      <div id="rspamd_global_filters"{% if show_rspamd_global_filters != true %} class="hidden"{% endif %}>
+      <div id="rspamd_global_filters"{% if show_rspamd_global_filters != true %} class="d-none"{% endif %}>
         <hr>
         <span class="anchor" id="regexmaps"></span>
         <h4>{{ lang.admin.regex_maps }}</h4>
diff --git a/data/web/templates/debug.twig b/data/web/templates/debug.twig
index 73535309..b7fa91b6 100644
--- a/data/web/templates/debug.twig
+++ b/data/web/templates/debug.twig
@@ -86,7 +86,7 @@
               {% for container, container_info in containers %}
                 <li class="list-group-item">
                   {{ container }} ({{ container_info.Config.Image }})
-                  <br class="visible-xs" />
+                  <br class="d-block d-sm-none" />
                   <small>({{ lang.debug.started_on }} <span class="parse_date">{{ container_info.State.StartedAtHR }}</span>)</small>
                   <a href data-bs-toggle="modal" data-container="{{ container }}" data-bs-target="#RestartContainer" class="ms-auto btn btn-xs btn-secondary">{{ lang.debug.restart_container }}
                     <i class="ms-auto bi
diff --git a/data/web/templates/domainadmin.twig b/data/web/templates/domainadmin.twig
index 1138fea5..5ce28410 100644
--- a/data/web/templates/domainadmin.twig
+++ b/data/web/templates/domainadmin.twig
@@ -16,16 +16,16 @@
 
     {# TFA #}
     <div class="row">
-      <div class="col-sm-3 col-xs-5 text-end">{{ lang.tfa.tfa }}</div>
-      <div class="col-sm-9 col-xs-7">
+      <div class="col-sm-3 col-5 text-end">{{ lang.tfa.tfa }}</div>
+      <div class="col-sm-9 col-7">
         <p id="tfa_pretty">{{ tfa_data.pretty }}</p>
         {% include 'tfa_keys.twig' %}
         <br>
       </div>
     </div>
     <div class="row">
-      <div class="col-sm-3 col-xs-5 text-end">{{ lang.tfa.set_tfa }}</div>
-      <div class="col-sm-9 col-xs-7">
+      <div class="col-sm-3 col-5 text-end">{{ lang.tfa.set_tfa }}</div>
+      <div class="col-sm-9 col-7">
         <select id="selectTFA" class="selectpicker" title="{{ lang.tfa.select }}">
           <option value="yubi_otp">{{ lang.tfa.yubi_otp }}</option>
           <option value="u2f">{{ lang.tfa.u2f }}</option>
@@ -38,13 +38,13 @@
     <hr>
     {# FIDO2 #}
     <div class="row">
-      <div class="col-sm-3 col-xs-5 text-end">
+      <div class="col-sm-3 col-5 text-end">
         <p><i class="bi bi-shield-fill-check"></i> {{ lang.fido2.fido2_auth }}</p>
       </div>
     </div>
     <div class="row">
-      <div class="col-sm-3 col-xs-5 text-end">{{ lang.fido2.known_ids }}:</div>
-      <div class="col-sm-9 col-xs-7">
+      <div class="col-sm-3 col-5 text-end">{{ lang.fido2.known_ids }}:</div>
+      <div class="col-sm-9 col-7">
         <div class="table-responsive">
           <table class="table table-striped table-hover table-condensed" id="fido2_keys">
             <tr>
@@ -70,8 +70,8 @@
     </div>
     <br>
     <div class="row" id="status-fido2">
-      <div class="col-sm-3 col-xs-5 text-end">{{ lang.fido2.register_status }}:</div>
-      <div class="col-sm-9 col-xs-7">
+      <div class="col-sm-3 col-5 text-end">{{ lang.fido2.register_status }}:</div>
+      <div class="col-sm-9 col-7">
         <div id="fido2-alerts">-</div>
       </div>
       <br>
diff --git a/data/web/templates/edit/aliasdomain.twig b/data/web/templates/edit/aliasdomain.twig
index 4a4ad334..6ab6378f 100644
--- a/data/web/templates/edit/aliasdomain.twig
+++ b/data/web/templates/edit/aliasdomain.twig
@@ -46,10 +46,10 @@
 {% if dkim %}
 <hr>
 <div class="row">
-  <div class="col-xs-12 col-sm-2">
+  <div class="col-12 col-sm-2">
     <p>Domain: <strong>{{ result.alias_domain }}</strong> ({{ dkim.dkim_selector }}._domainkey)</p>
   </div>
-  <div class="col-xs-12 col-sm-10">
+  <div class="col-12 col-sm-10">
     <pre>{{ dkim.dkim_txt }}</pre>
   </div>
 </div>
diff --git a/data/web/templates/edit/domain.twig b/data/web/templates/edit/domain.twig
index 697308a4..1a79c29e 100644
--- a/data/web/templates/edit/domain.twig
+++ b/data/web/templates/edit/domain.twig
@@ -113,10 +113,10 @@
     {% if dkim %}
     <hr>
     <div class="row">
-      <div class="col-xs-12 col-sm-2">
+      <div class="col-12 col-sm-2">
         <p>Domain: <strong>{{ result.domain_name }}</strong> ({{ dkim.dkim_selector }}._domainkey)</p>
       </div>
-      <div class="col-xs-12 col-sm-10">
+      <div class="col-12 col-sm-10">
         <pre>{{ dkim.dkim_txt }}</pre>
       </div>
     </div>
@@ -143,7 +143,7 @@
       <div class="col-sm-6">
         <h4>{{ lang.user.spamfilter_wl }}</h4>
         <p>{{ lang.user.spamfilter_wl_desc|raw }}</p>
-        <form class="form-inline space20" data-id="add_wl_policy_domain">
+        <form class="form-inline mb-4" data-id="add_wl_policy_domain">
           <div class="input-group" data-acl="{{ acl.spam_policy }}">
             <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
             <span class="input-group-btn">
@@ -164,7 +164,7 @@
       <div class="col-sm-6">
         <h4>{{ lang.user.spamfilter_bl }}</h4>
         <p>{{ lang.user.spamfilter_bl_desc|raw }}</p>
-        <form class="form-inline space20" data-id="add_bl_policy_domain">
+        <form class="form-inline mb-4" data-id="add_bl_policy_domain">
           <div class="input-group" data-acl="{{ acl.spam_policy }}">
             <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
             <span class="input-group-btn">
diff --git a/data/web/templates/edit/mailbox.twig b/data/web/templates/edit/mailbox.twig
index 6f66edb1..5f6106c5 100644
--- a/data/web/templates/edit/mailbox.twig
+++ b/data/web/templates/edit/mailbox.twig
@@ -72,7 +72,7 @@
       <div class="form-group">
         <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 space20">
+          <select data-acl="{{ acl.mailbox_relayhost }}" data-live-search="true" id="relayhost" name="relayhost" class="form-control mb-4">
             {% for rlyhost in rlyhosts %}
               <option
                 style="{% if rlyhost.active != '1' %}background: #ff4136; color: #fff{% endif %}"
@@ -85,7 +85,7 @@
               {{ lang.edit.none_inherit }}
             </option>
           </select>
-          <p class="visible-xs" style="margin: 0;padding: 0">&nbsp;</p>
+          <p class="d-block d-sm-none" style="margin: 0;padding: 0">&nbsp;</p>
           <small class="text-muted">{{ lang.edit.mailbox_relayhost_info }}</small>
         </div>
       </div>
diff --git a/data/web/templates/mailbox/tab-bcc.twig b/data/web/templates/mailbox/tab-bcc.twig
index 9ecf9ec0..b112f989 100644
--- a/data/web/templates/mailbox/tab-bcc.twig
+++ b/data/web/templates/mailbox/tab-bcc.twig
@@ -2,7 +2,7 @@
   <div class="card">
     <div class="card-header">
       {{ lang.mailbox.bcc_maps }} <span class="badge bg-info table-lines"></span>
-      <div class="btn-group ms-auto hidden-xs">
+      <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.bcc_maps }}" data-bs-toggle="modal" data-bs-target="#addBCCModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_bcc_entry }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_bcc_table" data-table="bcc_table">{{ lang.admin.refresh }}</button>
         <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}
@@ -38,7 +38,7 @@
   <div class="card{% if mailcow_cc_role != 'admin' %} hidden{% endif %}">
     <div class="card-header">
       {{ lang.mailbox.recipient_maps }} <span class="badge bg-info table-lines"></span>
-      <div class="btn-group ms-auto hidden-xs">
+      <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addRecipientMapModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_recipient_map_entry }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_recipient_map_table" data-table="recipient_map_table">{{ lang.admin.refresh }}</button>
         <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}
diff --git a/data/web/templates/mailbox/tab-domain-aliases.twig b/data/web/templates/mailbox/tab-domain-aliases.twig
index 4e1f24f8..97afa981 100644
--- a/data/web/templates/mailbox/tab-domain-aliases.twig
+++ b/data/web/templates/mailbox/tab-domain-aliases.twig
@@ -2,7 +2,7 @@
   <div class="card">
     <div class="card-header">
       {{ lang.mailbox.domain_aliases }} <span class="badge bg-info table-lines"></span>
-      <div class="btn-group ms-auto hidden-xs">
+      <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.alias_domains }}" data-bs-toggle="modal" data-bs-target="#addAliasDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain_alias }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_aliasdomain_table" data-table="aliasdomain_table">{{ lang.admin.refresh }}</button>
         <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}
diff --git a/data/web/templates/mailbox/tab-domains.twig b/data/web/templates/mailbox/tab-domains.twig
index 9b6453b8..1bdc434a 100644
--- a/data/web/templates/mailbox/tab-domains.twig
+++ b/data/web/templates/mailbox/tab-domains.twig
@@ -2,7 +2,7 @@
   <div class="card">
     <div class="card-header">
       {{ lang.mailbox.domains }} <span class="badge bg-info table-lines"></span>
-      <div class="btn-group ms-auto hidden-xs">
+      <div class="btn-group ms-auto d-none d-sm-flex">
         {% if mailcow_cc_role == 'admin' %}
           <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addDomainModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_domain }}</button>
         {% endif %}
diff --git a/data/web/templates/mailbox/tab-filters.twig b/data/web/templates/mailbox/tab-filters.twig
index e08840ca..4ea2b4f2 100644
--- a/data/web/templates/mailbox/tab-filters.twig
+++ b/data/web/templates/mailbox/tab-filters.twig
@@ -2,7 +2,7 @@
   <div class="card">
     <div class="card-header">
       {{ lang.mailbox.filters }} <span class="badge bg-info table-lines"></span>
-      <div class="btn-group ms-auto hidden-xs">
+      <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-acl="{{ acl.filters }}" data-bs-toggle="modal" data-bs-target="#addFilterModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_filter }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_filter_table" data-table="filter_table">{{ lang.admin.refresh }}</button>
         <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
diff --git a/data/web/templates/mailbox/tab-mailboxes.twig b/data/web/templates/mailbox/tab-mailboxes.twig
index d6b719fb..404a2b22 100644
--- a/data/web/templates/mailbox/tab-mailboxes.twig
+++ b/data/web/templates/mailbox/tab-mailboxes.twig
@@ -2,7 +2,7 @@
   <div class="card">
     <div class="card-header">
       {{ lang.mailbox.mailboxes }} <span class="badge bg-info table-lines"></span>
-      <div class="btn-group ms-auto hidden-xs">
+      <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_mailbox }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_mailbox_table" data-table="mailbox_table">{{ lang.admin.refresh }}</button>
         <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
@@ -11,7 +11,7 @@
         </ul>
       </div>
     </div>
-    <div class="mass-actions-mailbox hidden-xs" data-actions-header="true"></div>
+    <div class="mass-actions-mailbox d-none d-sm-flex" data-actions-header="true"></div>
     <div class="table-responsive">
       <table id="mailbox_table" class="table table-striped"></table>
     </div>
@@ -58,7 +58,7 @@
         </ul>
         <a class="btn btn-sm d-block d-sm-inline btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addMailboxModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_mailbox }}</a>
       </div>
-      <div class="btn-group hidden-xs hidden-sm">
+      <div class="btn-group d-none d-md-flex">
         <a class="btn btn-sm btn-secondary" id="toggle_multi_select_all" data-id="mailbox" href="#"><i class="bi bi-check-all"></i> {{ lang.mailbox.toggle_all }}</a>
         <div class="btn-group">
           <a class="btn btn-sm btn-secondary dropdown-toggle" data-bs-toggle="dropdown" href="#">{{ lang.mailbox.mailbox }}</a>
diff --git a/data/web/templates/mailbox/tab-mbox-aliases.twig b/data/web/templates/mailbox/tab-mbox-aliases.twig
index b07f8bb9..793903f9 100644
--- a/data/web/templates/mailbox/tab-mbox-aliases.twig
+++ b/data/web/templates/mailbox/tab-mbox-aliases.twig
@@ -2,7 +2,7 @@
   <div class="card">
     <div class="card-header">
       {{ lang.mailbox.aliases }} <span class="badge bg-info table-lines"></span>
-      <div class="btn-group ms-auto hidden-xs">
+      <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addAliasModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_alias }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_alias_table" data-table="alias_table">{{ lang.admin.refresh }}</button>
         <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
diff --git a/data/web/templates/mailbox/tab-resources.twig b/data/web/templates/mailbox/tab-resources.twig
index 06971f7d..0f55ab66 100644
--- a/data/web/templates/mailbox/tab-resources.twig
+++ b/data/web/templates/mailbox/tab-resources.twig
@@ -2,7 +2,7 @@
   <div class="card">
     <div class="card-header">
       {{ lang.mailbox.resources }} <span class="badge bg-info table-lines"></span>
-      <div class="btn-group ms-auto hidden-xs">
+      <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addResourceModal"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_resource }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_resource_table" data-table="resource_table">{{ lang.admin.refresh }}</button>
         <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
diff --git a/data/web/templates/mailbox/tab-syncjobs.twig b/data/web/templates/mailbox/tab-syncjobs.twig
index 94ade0e0..2c1c5e43 100644
--- a/data/web/templates/mailbox/tab-syncjobs.twig
+++ b/data/web/templates/mailbox/tab-syncjobs.twig
@@ -2,7 +2,7 @@
   <div class="card">
     <div class="card-header">
       {{ lang.mailbox.sync_jobs }} <span class="badge bg-info table-lines"></span>
-      <div class="btn-group ms-auto hidden-xs">
+      <div class="btn-group ms-auto d-none d-sm-flex">
         <button data-acl="{{ acl.syncjobs }}" class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addSyncJobModalAdmin"><i class="bi bi-plus-lg"></i> {{ lang.user.create_syncjob }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_sync_job_table" data-table="sync_job_table">{{ lang.admin.refresh }}</button>
         <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
diff --git a/data/web/templates/mailbox/tab-tls-policy.twig b/data/web/templates/mailbox/tab-tls-policy.twig
index 197b4326..6fa351c0 100644
--- a/data/web/templates/mailbox/tab-tls-policy.twig
+++ b/data/web/templates/mailbox/tab-tls-policy.twig
@@ -2,7 +2,7 @@
   <div class="card">
     <div class="card-header">
       {{ lang.mailbox.tls_policy_maps_long }} <span class="badge bg-info table-lines"></span>
-      <div class="btn-group ms-auto hidden-xs">
+      <div class="btn-group ms-auto d-none d-sm-flex">
         <button class="btn btn-xs btn-success" href="#" data-bs-toggle="modal" data-bs-target="#addTLSPolicyMapAdmin"><i class="bi bi-plus-lg"></i> {{ lang.mailbox.add_tls_policy_map }}</button>
         <button class="btn btn-xs btn-secondary refresh_table" data-draw="draw_tls_policy_table" data-table="tls_policy_table">{{ lang.admin.refresh }}</button>
         <button type="button" class="btn btn-xs btn-secondary dropdown-toggle" data-bs-toggle="dropdown">{{ lang.mailbox.table_size }}</button>
diff --git a/data/web/templates/user/SpamAliases.twig b/data/web/templates/user/SpamAliases.twig
index 30aca886..f07b89be 100644
--- a/data/web/templates/user/SpamAliases.twig
+++ b/data/web/templates/user/SpamAliases.twig
@@ -1,6 +1,6 @@
 <div role="tabpanel" class="tab-pane fade" id="SpamAliases" role="tabpanel" aria-labelledby="SpamAliases">
   <div class="row">
-    <div class="col-md-12 col-sm-12 col-xs-12">
+    <div class="col-md-12 col-sm-12 col-12">
       <div class="table-responsive">
         <table class="table table-striped" id="tla_table"></table>
       </div>
diff --git a/data/web/templates/user/Spamfilter.twig b/data/web/templates/user/Spamfilter.twig
index 8b01e926..44ad33a1 100644
--- a/data/web/templates/user/Spamfilter.twig
+++ b/data/web/templates/user/Spamfilter.twig
@@ -34,7 +34,7 @@
     <div class="col-sm-6">
       <h4>{{ lang.user.spamfilter_wl }}</h4>
       <p>{{ lang.user.spamfilter_wl_desc|raw }}</p>
-      <form class="form-inline space20" data-id="add_wl_policy_mailbox">
+      <form class="form-inline mb-4" data-id="add_wl_policy_mailbox">
         <div class="input-group" data-acl="{{ acl.spam_policy }}">
           <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
           <span class="input-group-btn">
@@ -55,7 +55,7 @@
     <div class="col-sm-6">
       <h4>{{ lang.user.spamfilter_bl }}</h4>
       <p>{{ lang.user.spamfilter_bl_desc|raw }}</p>
-      <form class="form-inline space20" data-id="add_bl_policy_mailbox">
+      <form class="form-inline mb-4" data-id="add_bl_policy_mailbox">
         <div class="input-group" data-acl="{{ acl.spam_policy }}">
           <input type="text" class="form-control" name="object_from" placeholder="*@example.org" required>
           <span class="input-group-btn">
diff --git a/data/web/templates/user/tab-user-auth.twig b/data/web/templates/user/tab-user-auth.twig
index 12a6efd7..5787c04a 100644
--- a/data/web/templates/user/tab-user-auth.twig
+++ b/data/web/templates/user/tab-user-auth.twig
@@ -4,8 +4,8 @@
     <div class="card-body">
       {% if not skip_sogo %}
       <div class="row">
-        <div class="hidden-xs col-md-3 col-xs-5 text-end"></div>
-        <div class="col-md-3 col-xs-12">
+        <div class="d-none d-sm-flex col-md-3 col-5 text-end"></div>
+        <div class="col-md-3 col-12">
           {% if dual_login and allow_admin_email_login == 'n' %}
             <button disabled class="btn btn-secondary btn-block btn-xs-lg">
               <i class="bi bi-inbox-fill"></i> {{ lang.user.open_webmail_sso }}
@@ -19,8 +19,8 @@
       </div>
       <hr>
       <div class="row">
-        <div class="hidden-xs col-md-3 col-xs-5 text-end"></div>
-        <div class="col-md-9 col-xs-12">
+        <div class="d-none d-sm-flex col-md-3 col-5 text-end"></div>
+        <div class="col-md-9 col-12">
           <p class="text-muted text-muted-mt-0">{{ lang.user.direct_protocol_access|raw }}</p>
           {% if mailboxdata.attributes.imap_access == 1 %}<div class="badge fs-5 bg-success label-protocol-access">IMAP <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-5 bg-danger label-protocol-access">IMAP <i class="bi bi-x-lg"></i></div>{% endif %}
           {% if mailboxdata.attributes.smtp_access == 1 %}<div class="badge fs-5 bg-success label-protocol-access">SMTP <i class="bi bi-check-lg"></i></div>{% else %}<div class="badge fs-5 bg-danger label-protocol-access">SMTP <i class="bi bi-x-lg"></i></div>{% endif %}
@@ -32,8 +32,8 @@
       <hr>
       {% endif %}
       <div class="row">
-        <div class="col-md-3 col-xs-12 text-sm-end text-start space20">{{ lang.user.in_use }}:</div>
-        <div class="col-md-5 col-xs-12">
+        <div class="col-md-3 col-12 text-sm-end text-start mb-4">{{ lang.user.in_use }}:</div>
+        <div class="col-md-5 col-12">
           <div class="progress">
             <div class="progress-bar bg-{{ mailboxdata.percent_class }}" role="progressbar" aria-valuenow="{{ mailboxdata.percent_in_use }}" aria-valuemin="0" aria-valuemax="100" style="min-width:2em;width: {{ mailboxdata.percent_in_use }}%;">
               {{ mailboxdata.percent_in_use }}%
@@ -47,15 +47,15 @@
       <hr>
       {# FIDO2 #}
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-sm-end text-start">
+        <div class="col-sm-3 col-12 text-sm-end text-start">
           <p><i class="bi bi-shield-fill-check"></i> {{ lang.fido2.fido2_auth }}</p>
         </div>
       </div>
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-sm-end text-start space20">
+        <div class="col-sm-3 col-12 text-sm-end text-start mb-4">
           {{ lang.fido2.known_ids }}:
         </div>
-        <div class="col-sm-9 col-xs-12">
+        <div class="col-sm-9 col-12">
           <div class="table-responsive">
             <table class="table table-striped table-hover table-condensed" id="fido2_keys">
               <tr>
@@ -81,16 +81,16 @@
       </div>
       <br>
       <div class="row" id="status-fido2">
-        <div class="col-sm-3 col-xs-5 text-end">{{ lang.fido2.register_status }}:</div>
-        <div class="col-sm-9 col-xs-7">
+        <div class="col-sm-3 col-5 text-end">{{ lang.fido2.register_status }}:</div>
+        <div class="col-sm-9 col-7">
           <div id="fido2-alerts">-</div>
         </div>
         <br>
       </div>
       <hr>
       <div class="row">
-        <div class="col-md-3 col-xs-12 text-sm-end text-start space20"><i class="bi bi-file-earmark-text"></i> {{ lang.user.apple_connection_profile }}:</div>
-        <div class="col-md-9 col-xs-12">
+        <div class="col-md-3 col-12 text-sm-end text-start mb-4"><i class="bi bi-file-earmark-text"></i> {{ lang.user.apple_connection_profile }}:</div>
+        <div class="col-md-9 col-12">
           <p><i class="bi bi-file-earmark-post"></i> <a href="/mobileconfig.php?only_email">{{ lang.user.email }}</a> <small>IMAP, SMTP</small></p>
           <p class="text-muted">{{ lang.user.apple_connection_profile_mailonly }}</p>
           {% if not skip_sogo %}
@@ -100,8 +100,8 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-md-3 col-xs-12 text-sm-end text-start space20"><i class="bi bi-file-earmark-text"></i> {{ lang.user.apple_connection_profile }}<br />{{ lang.user.with_app_password }}:</div>
-        <div class="col-md-9 col-xs-12">
+        <div class="col-md-3 col-12 text-sm-end text-start mb-4"><i class="bi bi-file-earmark-text"></i> {{ lang.user.apple_connection_profile }}<br />{{ lang.user.with_app_password }}:</div>
+        <div class="col-md-9 col-12">
           <p><i class="bi bi-file-earmark-post"></i> <a href="/mobileconfig.php?only_email&amp;app_password">{{ lang.user.email }}</a> <small>IMAP, SMTP</small></p>
           <p class="text-muted">{{ lang.user.apple_connection_profile_mailonly }} {{ lang.user.apple_connection_profile_with_app_password }}</p>
           {% if not skip_sogo %}
diff --git a/data/web/templates/user/tab-user-details.twig b/data/web/templates/user/tab-user-details.twig
index 806ea620..95e2b680 100644
--- a/data/web/templates/user/tab-user-details.twig
+++ b/data/web/templates/user/tab-user-details.twig
@@ -3,10 +3,10 @@
     <div class="card-header">{{ lang.user.mailbox_details }}</div>
     <div class="card-body">
       <div class="row">
-        <div class="col-sm-4 col-md-3 col-xs-12 text-sm-end text-start"><i class="bi bi-pin-angle"></i> {{ lang.user.direct_aliases }}:
+        <div class="col-sm-4 col-md-3 col-12 text-sm-end text-start"><i class="bi bi-pin-angle"></i> {{ lang.user.direct_aliases }}:
           <p class="small">{{ lang.user.direct_aliases_desc }}</p>
         </div>
-        <div class="col-sm-8 col-md-9 col-xs-12">
+        <div class="col-sm-8 col-md-9 col-12">
           {% for direct_alias, direct_alias_meta in user_get_alias_details.direct_aliases %}
             {% if direct_alias_meta.public_comment %}
               {{ direct_alias }} &mdash; <i class="bi bi-chat-left"></i> {{ direct_alias_meta.public_comment }}<br>
@@ -20,10 +20,10 @@
       </div>
       <br>
       <div class="row">
-        <div class="col-sm-4 col-md-3 col-xs-12 text-sm-end text-start"><i class="bi bi-share"></i> {{ lang.user.shared_aliases }}:
+        <div class="col-sm-4 col-md-3 col-12 text-sm-end text-start"><i class="bi bi-share"></i> {{ lang.user.shared_aliases }}:
           <p class="small">{{ lang.user.shared_aliases_desc }}</p>
         </div>
-        <div class="col-sm-8 col-md-9 col-xs-12">
+        <div class="col-sm-8 col-md-9 col-12">
           {% for shared_alias, shared_alias_meta in user_get_alias_details.shared_aliases %}
             {% if shared_alias_meta.public_comment %}
               {{ shared_alias }} &mdash; <i class="bi bi-chat-left"></i> {{ shared_alias_meta.public_comment }}<br>
@@ -37,8 +37,8 @@
       </div>
       <hr>
       <div class="row">
-        <div class="col-sm-4 col-md-3 col-xs-12 text-sm-end text-start space20">{{ lang.user.aliases_also_send_as }}:</div>
-        <div class="col-sm-8 col-md-9 col-xs-12">
+        <div class="col-sm-4 col-md-3 col-12 text-sm-end text-start mb-4">{{ lang.user.aliases_also_send_as }}:</div>
+        <div class="col-sm-8 col-md-9 col-12">
           <p>
             {% if user_get_alias_details.aliases_also_send_as == '*' %}
               {{ lang.user.sender_acl_disabled }}
@@ -51,14 +51,14 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm-4 col-md-3 col-xs-12 text-sm-end text-start space20">{{ lang.user.aliases_send_as_all }}:</div>
-        <div class="col-sm-8 col-md-9 col-xs-12">
+        <div class="col-sm-4 col-md-3 col-12 text-sm-end text-start mb-4">{{ lang.user.aliases_send_as_all }}:</div>
+        <div class="col-sm-8 col-md-9 col-12">
           <p>{% if not user_get_alias_details.aliases_send_as_all %}<i class="bi bi-x-lg"></i>{% endif %}</p>
         </div>
       </div>
       <div class="row">
-        <div class="col-sm-4 col-md-3 col-xs-12 text-sm-end text-start space20">{{ lang.user.is_catch_all }}:</div>
-        <div class="col-sm-8 col-md-9 col-xs-12">
+        <div class="col-sm-4 col-md-3 col-12 text-sm-end text-start mb-4">{{ lang.user.is_catch_all }}:</div>
+        <div class="col-sm-8 col-md-9 col-12">
           <p>{% if not user_get_alias_details.is_catch_all %}<i class="bi bi-x-lg"></i>{% endif %}</p>
         </div>
       </div>
diff --git a/data/web/templates/user/tab-user-settings.twig b/data/web/templates/user/tab-user-settings.twig
index 39d7988b..a427df17 100644
--- a/data/web/templates/user/tab-user-settings.twig
+++ b/data/web/templates/user/tab-user-settings.twig
@@ -4,8 +4,8 @@
     <div class="card-body">
       {# Show tagging options #}
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-sm-end text-start text-xs-bold space20">{{ lang.user.tag_handling }}:</div>
-        <div class="col-sm-9 col-xs-12">
+        <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.tag_handling }}:</div>
+        <div class="col-sm-9 col-12">
           <div class="btn-group" data-acl="{{ acl.delimiter_action }}">
             <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-secondary{% if get_tagging_options == 'subfolder' %} active{% endif %}"
             data-action="edit_selected"
@@ -32,8 +32,8 @@
       </div>
       {# Show TLS policy options #}
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-sm-end text-start text-xs-bold space20">{{ lang.user.tls_policy }}:</div>
-        <div class="col-sm-9 col-xs-12">
+        <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.tls_policy }}:</div>
+        <div class="col-sm-9 col-12">
           <div class="btn-group" data-acl="{{ acl.tls_policy }}">
             <button type="button" class="btn btn-sm btn-xs-half d-block d-sm-inline btn-secondary{% if get_tls_policy.tls_enforce_in == '1' %} active"{% endif %}"
             data-action="edit_selected"
@@ -53,8 +53,8 @@
       </div>
       {# Show quarantine_notification options #}
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-sm-end text-start text-xs-bold space20">{{ lang.user.quarantine_notification }}:</div>
-        <div class="col-sm-9 col-xs-12">
+        <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.quarantine_notification }}:</div>
+        <div class="col-sm-9 col-12">
           <div class="btn-group" data-acl="{{ acl.quarantine_notification }}">
             <button type="button" class="btn btn-sm btn-xs-quart d-block d-sm-inline btn-secondary{% if quarantine_notification == 'never' %} active{% endif %}"
             data-action="edit_selected"
@@ -85,8 +85,8 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-sm-end text-start text-xs-bold space20">{{ lang.user.quarantine_category }}:</div>
-        <div class="col-sm-9 col-xs-12">
+        <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.quarantine_category }}:</div>
+        <div class="col-sm-9 col-12">
           <div class="btn-group" data-acl="{{ acl.quarantine_category }}">
             <button type="button" class="btn btn-sm btn-xs-third d-block d-sm-inline btn-secondary{% if quarantine_category == 'reject' %} active{% endif %}"
             data-action="edit_selected"
@@ -113,15 +113,15 @@
       {% if not skip_sogo %}
       <hr>
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-sm-end text-start text-xs-bold space20">{{ lang.user.eas_reset }}:</div>
-        <div class="col-sm-9 col-xs-12">
+        <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.eas_reset }}:</div>
+        <div class="col-sm-9 col-12">
           <button class="btn btn-sm d-block d-sm-inline btn-secondary" data-acl="{{ acl.eas_reset }}" data-action="delete_selected" data-text="{{ lang.user.eas_reset }}?" data-item="{{ mailcow_cc_username }}" data-id="eas_cache" data-api-url='delete/eas_cache' href="#">{{ lang.user.eas_reset_now }}</button>
           <p class="text-muted">{{ lang.user.eas_reset_help|raw }}</p>
         </div>
       </div>
       <div class="row">
-        <div class="col-sm-3 col-xs-12 text-sm-end text-start text-xs-bold space20">{{ lang.user.sogo_profile_reset }}:</div>
-        <div class="col-sm-9 col-xs-12">
+        <div class="col-sm-3 col-12 text-sm-end text-start text-xs-bold mb-4">{{ lang.user.sogo_profile_reset }}:</div>
+        <div class="col-sm-9 col-12">
           <button class="btn btn-sm d-block d-sm-inline btn-secondary" data-acl="{{ acl.sogo_profile_reset }}" data-action="delete_selected" data-text="{{ lang.user.sogo_profile_reset }}?" data-item="{{ mailcow_cc_username }}" data-id="sogo_profile" data-api-url='delete/sogo_profile' href="#">{{ lang.user.sogo_profile_reset_now }}</button>
           <p class="text-muted">{{ lang.user.sogo_profile_reset_help|raw }}</p>
         </div>