[Web] Fix app layout issue

data/web/css/build/015-responsive.css

@@ -6,15 +6,9 @@
   max-width: 350px;
 }
 
-.card-login .apps .btn {
-  width: auto;
-  float: left;
-  margin-right: 10px;
-  margin-top: auto;
-}
-.card-login .apps .btn:hover {
-  margin-top: 1px !important;
-  border-bottom-width: 3px;
+.card .apps {
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .responsive-tabs .nav-tabs {
@@ -43,16 +37,6 @@
       opacity: 1;
   }
 
-  .card-login .apps .btn {
-    width: 100%;
-    float: none;
-    margin-bottom: 10px;
-  }
-
-  .card-login .apps .btn {
-    border-bottom-width: 4px;
-  }
-
   .xs-show {
     display: block !important;
   }
@@ -113,9 +97,6 @@
   .btn-group.nowrap .dropdown-menu {
     width: 100%;
   }
-  .card-login .btn-group {
-    display: block;
-  }
   .mass-actions-user .btn-group {
     float: none;
   }
@@ -191,9 +172,6 @@
   .btn-group .btn i {
     margin-right: 5px;
   }
-  .card-login .btn-group .btn {
-    display: block !important;
-  }
 
   .dt-sm-head-hidden .dtr-title {
     display: none !important;
@@ -206,7 +184,7 @@
   .senders-mw220 {
     max-width: 100% !important;
   }
-  
+
   table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
   table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before,
   table.dataTable td.dt-control:before {
@@ -215,7 +193,7 @@
       line-height: 2rem;
       margin-top: -15px;
   }
-  
+
   li .dtr-data {
       padding: 0;
   }

data/web/templates/admin_index.twig

@@ -63,7 +63,7 @@
         <div class="my-4" id="fido2-alerts"></div>
         {% if (mailcow_apps or app_links) and not hide_mailcow_apps %}
         <legend><i class="bi bi-link-45deg"></i> {{ ui_texts.apps_name|raw }}</legend><hr />
-        <div class="my-2 d-grid gap-2 d-sm-block apps">
+        <div class="my-2 apps">
           {% for app in mailcow_apps %}
             {% if not app.hide %}
               {% if not skip_sogo or not is_uri('SOGo', app.link) %}

data/web/templates/domainadmin_index.twig

@@ -63,7 +63,7 @@
         <div class="my-4" id="fido2-alerts"></div>
         {% if (mailcow_apps or app_links) and not hide_mailcow_apps %}
         <legend><i class="bi bi-link-45deg"></i> {{ ui_texts.apps_name|raw }}</legend><hr />
-        <div class="my-2 d-grid gap-2 d-sm-block apps">
+        <div class="my-2 apps">
           {% for app in mailcow_apps %}
             {% if not app.hide %}
               {% if not skip_sogo or not is_uri('SOGo', app.link) %}

data/web/templates/user_index.twig

@@ -65,10 +65,10 @@
         </div>
         <div class="hr-title mt-5"><strong>{{ lang.login.other_logins }}</strong></div>
         <div class="d-flex flex-column align-items-center">
-          <a class="btn btn-xs-lg btn-secondary w-100" style="max-width: 400px;" href="#" id="fido2-login"><i class="bi bi-shield-fill-check"></i> {{ lang.login.fido2_webauthn }}</a>
           {% if has_iam_sso %}
           <a class="btn btn-xs-lg btn-secondary w-100 mt-2" style="max-width: 400px;" href="/?iam_sso=1"><i class="bi bi-cloud-arrow-up-fill"></i> {{ lang.admin.iam_sso }}</a>
           {% endif %}
+          <a class="btn btn-xs-lg btn-secondary w-100 mt-2" style="max-width: 400px;" href="#" id="fido2-login"><i class="bi bi-shield-fill-check"></i> {{ lang.login.fido2_webauthn }}</a>
         </div>
         {% if login_delay %}
         <p><div class="my-4 alert alert-info">{{ lang.login.delayed|format(login_delay) }}</b></div></p>
@@ -76,7 +76,7 @@
         <div class="my-4" id="fido2-alerts"></div>
         {% if not oauth2_request and (mailcow_apps or app_links) and not hide_mailcow_apps %}
         <legend><i class="bi bi-link-45deg"></i> {{ ui_texts.apps_name|raw }}</legend><hr />
-        <div class="my-2 d-grid gap-2 d-sm-block apps">
+        <div class="my-2 apps">
           {% for app in mailcow_apps %}
             {% if not app.hide %}
               {% if not skip_sogo or not is_uri('SOGo', app.link) %}