[Web] Fix responsive btn block

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

@@ -7,94 +7,113 @@
 }
 
 .bootstrap-select {
-	max-width: 350px;
+  max-width: 350px;
 }
 
 .panel-login .apps .btn {
   width: auto;
   float: left;
   margin-right: 10px;
+  margin-top: auto;
 }
+.panel-login .apps .btn:hover {
+  margin-top: 1px !important;
+  border-bottom-width: 3px;
+}
+
+@media (max-width: 767px) {
+  .panel-login .apps .btn {
+    width: 100%;
+    float: none;
+    margin-bottom: 10px;
+  }
 
+  .panel-login .apps .btn {
+    border-bottom-width: 4px;
+  }
+
+  .media-clearfix::after {
+    clear: both;
+    box-sizing: border-box;
+  }
+
+  .media-clearfix::before {
+    display: table;
+    content: " ";
+    box-sizing: border-box;
+  }
+
+  .xs-show {
+    display: block !important;
+  }
+
+  .js-tabcollapse-panel-group .panel{
+    border: none;
+    box-shadow: none;
+  }
+
+  .js-tabcollapse-panel-group .panel-body {
+    padding: 10px 0;
+  }
+
+  .js-tabcollapse-panel-group .js-tabcollapse-panel-body .panel-body {
+    padding: 0;
+  }
+
+  .js-tabcollapse-panel-body .panel-heading {
+    display: none;
+  }
+
+  .js-tabcollapse-panel-body .well,
+  .panel-body .form-inline.well {
+    border: none;
+    padding: 0;
+    margin: 0;
+    box-shadow: none;
+    background-color: #fff;
+  }
+
+  .js-tabcollapse-panel-heading {
+    display: block;
+    height: 37px;
+    line-height: 37px;
+    text-indent: 15px;
+  }
+  .js-tabcollapse-panel-heading:hover {
+    text-decoration: none;
+  }
+  .js-tabcollapse-panel-heading {
+    position: relative;
+  }
+  .js-tabcollapse-panel-heading:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 17px;
+    right: 17px;
+    width: 0;
+    height: 0;
+    margin-left: 2px;
+    vertical-align: middle;
+    border-bottom: 4px dashed;
+    border-right: 4px solid transparent;
+    border-left: 4px solid transparent;
+  }
+  .js-tabcollapse-panel-heading.collapsed:after {
+    border-bottom: none;
+    border-top: 4px dashed;
+  }
 
-@media (max-width: 767px) {	
-	.panel-login .apps .btn {
-		width: 100%;
-		float: none;
-		margin-bottom: 10px;
-	}
-	
-	.xs-show {
-		display: block !important;
-	}
-	
-	.js-tabcollapse-panel-group .panel{
-	  border: none;
-	  box-shadow: none;
-	}
-	
-	.js-tabcollapse-panel-group .panel-body {
-	  padding: 10px 0;
-	}
-	
-	.js-tabcollapse-panel-group .js-tabcollapse-panel-body .panel-body {
-		padding: 0;
-	}
-	
-	.js-tabcollapse-panel-body .panel-heading {
-	  display: none;
-	}
-	
-	.js-tabcollapse-panel-body .well,
-	.panel-body .form-inline.well {
-		border: none;
-		padding: 0;
-		margin: 0;
-		box-shadow: none;
-		background-color: #fff;
-	}
-	
-	.js-tabcollapse-panel-heading {
-	  display: block;
-	  height: 37px;
-	  line-height: 37px;
-	  text-indent: 15px;
-	}
-	.js-tabcollapse-panel-heading:hover {
-	  text-decoration: none;
-	}
-	.js-tabcollapse-panel-heading {
-	  position: relative;
-	}
-	.js-tabcollapse-panel-heading:after {
-	  content: '';
-	  display: block;
-	  position: absolute;
-	  top: 17px;
-	  right: 17px;
-	  width: 0;
-	  height: 0;
-	  margin-left: 2px;
-	  vertical-align: middle;
-	  border-bottom: 4px dashed;
-	  border-right: 4px solid transparent;
-	  border-left: 4px solid transparent;
-	}
-	.js-tabcollapse-panel-heading.collapsed:after {
-	  border-bottom: none;
-	  border-top: 4px dashed;
-	}
-	
   .recent-login-success {
-	font-size: 14px;
-	margin-top: 10px !important;
+  font-size: 14px;
+  margin-top: 10px !important;
   }
   .pull-xs-right {
-	float: right !important;
+  float: right !important;
   }
   .pull-xs-right .dropdown-menu {
-	right: 0;
-	left: auto;
+  right: 0;
+  left: auto;
   }
   .text-xs-left {
     text-align: left;
@@ -135,7 +154,7 @@
     line-height: 15px;
   }
   .input-xs-lg {
-	height: 47px;
+  height: 47px;
     padding: 13px 16px;
   }
   .btn-group:not(.input-group-btn) {
@@ -143,7 +162,7 @@
     flex-wrap: wrap;
   }
   .panel-login .btn-group {
-	  display: block;
+    display: block;
   }
   .mass-actions-user .btn-group {
     float: none;
@@ -154,7 +173,7 @@
     width: 100%;
   }
   div[class^='mass-actions'] .btn-group .dropdown-menu {
-	top: 50%;
+  top: 50%;
   }
   div[class^='mass-actions'] .btn-group .btn-group .dropdown-menu,
   div.mass-actions-quarantine .btn-group .dropdown-menu,
@@ -167,17 +186,17 @@
     padding: 8px 20px;
   }
   div[class^='mass-actions'] .dropdown-header {
-	  font-size: 14px;
-	  font-weight: bold;
+    font-size: 14px;
+    font-weight: bold;
   }
   .space20 {
     margin-bottom: 10px;
   }
   .top100 {
-	  top: 100% !important;
+    top: 100% !important;
   }
   .top33 {
-	  top: 33% !important;
+    top: 33% !important;
   }
   .footable-filtering .form {
     width: 65%;
@@ -189,90 +208,90 @@
     text-align: left;
   }
   .footable-first-visible {
-	  min-width: 55px;
+    min-width: 55px;
   }
   table>tbody>tr>td>span.footable-toggle {
-	  font-size: 24px;
-	  margin-right: 14px !important;
+    font-size: 24px;
+    margin-right: 14px !important;
   }
   table>tbody>tr>td>span.footable-toggle + input {
-	  position: absolute;
-	  left: 38px;
+    position: absolute;
+    left: 38px;
   }
   .pagination {
     margin-bottom: 5px;
   }
   tr.footable-filtering>th>form {
-	  width: 270px;
+    width: 270px;
   }
   .mass-actions-mailbox {
     padding: 0;
   }
   .panel-xs-lg .panel-heading {
-	  height: 66px;
-	  line-height: 47px;
+    height: 66px;
+    line-height: 47px;
   }
   .panel-xs-lg .btn-group .btn {
-	  padding-right: 5px;
-	  padding-left: 5px;
+    padding-right: 5px;
+    padding-left: 5px;
   }
   .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
-	  width: 100%;
+    width: 100%;
   }
   .btn-group:not(.bootstrap-select) {
-	  width: auto !important;
+    width: auto !important;
   }
   .bootstrap-select {
-	  max-width: 100%;
+    max-width: 100%;
   }
   .img-responsive {
-	  margin: 0 auto;
+    margin: 0 auto;
   }
   .btn-group.footable-actions {
-	position: absolute;
+  position: absolute;
     width: 90vw !important;
     left: 0;
     height: 36px;
     margin-top: -8px;
   }
   .btn-group.footable-actions .btn {
-	padding: 10px 16px 7px;
+  padding: 10px 16px 7px;
     line-height: 15px;
     display: block;
     width: 100%;
   }
   .btn-group.footable-actions:after {
-	  content: "";
-	  display: block;
-	  clear: both;
+    content: "";
+    display: block;
+    clear: both;
   }
   .bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
-	  margin-right: 14px;
-	  white-space: normal;
+    margin-right: 14px;
+    white-space: normal;
   }
   .clearfix {
-	  flex-basis: 100%;
-	  height: 0;
+    flex-basis: 100%;
+    height: 0;
   }
   .btn-group > .btn-group {
-	  flex-basis: 100%;
+    flex-basis: 100%;
   }
   .btn-group .btn {
-	display: flex !important;
-	align-items: center;
-	justify-content: center;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
   }
   .btn-group .btn i {
     margin-right: 5px;
   }
   .btn-group .btn .caret {
-	margin-left: 5px;
+  margin-left: 5px;
   }
   .panel-login .btn-group .btn {
-	  display: block !important;
+    display: block !important;
   }
   .panel-login .clearfix {
-	  height: auto;
+    height: auto;
   }
 }
 

data/web/index.php

@@ -81,7 +81,7 @@ $_SESSION['index_query_string'] = $_SERVER['QUERY_STRING'];
                   <li<?= ($_SESSION['mailcow_locale'] == $c) ? ' class="active"' : ''; ?>><a href="?<?= http_build_query(array_merge($_GET, array('lang' => $c))) ?>"><span class="flag-icon flag-icon-<?=$c;?>"></span> <?=$v;?></a></li>
                   <?php } ?>
                 </ul>
-              <?php } ?>              
+              <?php } ?>
               <div class="clearfix"></div>
             </div>
             </form>
@@ -99,7 +99,9 @@ $_SESSION['index_query_string'] = $_SERVER['QUERY_STRING'];
               foreach ($MAILCOW_APPS as $app) {
                 if (getenv('SKIP_SOGO') == "y" && preg_match('/^\/SOGo/i', $app['link'])) { continue; }
               ?>
+              <div class="media-clearfix">
                 <a href="<?=(isset($app['link'])) ? htmlspecialchars($app['link']) : '';?>" role="button" title="<?=(isset($app['description'])) ? htmlspecialchars($app['description']) : '';?>" class="btn btn-primary btn-lg btn-block"><?= htmlspecialchars($app['name']); ?></a>
+              </div>
               <?php
               }
             }
@@ -108,12 +110,14 @@ $_SESSION['index_query_string'] = $_SERVER['QUERY_STRING'];
               foreach ($app_links as $row) {
                 foreach ($row as $key => $val) {
               ?>
-                <a href="<?= htmlspecialchars($val); ?>" role="button" class="btn btn-primary btn-lg btn-block"><?= htmlspecialchars($key); ?></a>
+                <div class="media-clearfix">
+                  <a href="<?= htmlspecialchars($val); ?>" role="button" class="btn btn-primary btn-lg btn-block"><?= htmlspecialchars($key); ?></a>
+                </div>
               <?php
                 }
               }
             } ?>
-            </div>  
+            </div>
           <?php }
           ?>
         </div>