[Web] enhaned responsive design (#4187)

Fixed buttons with long titles

Signed-off-by: Kristian Feldsam <feldsam@gmail.com>

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

@@ -13,7 +13,8 @@
 .panel-login .apps .btn {
   width: auto;
   float: left;
-  margin-bottom: 10px;
+  margin-right: 10px;
+  margin-top: auto;
 }
 
 
@@ -86,6 +87,7 @@
 	}
 	
   .recent-login-success {
+	font-size: 14px;
 	margin-top: 10px !important;
   }
   .pull-xs-right {
@@ -138,7 +140,11 @@
     padding: 13px 16px;
   }
   .btn-group:not(.input-group-btn) {
-    display: block;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .panel-login .btn-group {
+	  display: block;
   }
   .mass-actions-user .btn-group {
     float: none;
@@ -207,6 +213,10 @@
 	  height: 66px;
 	  line-height: 47px;
   }
+  .panel-xs-lg .btn-group .btn {
+	  padding-right: 5px;
+	  padding-left: 5px;
+  }
   .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
 	  width: 100%;
   }
@@ -219,9 +229,6 @@
   .img-responsive {
 	  margin: 0 auto;
   }
-  .recent-login-success {
-	  font-size: 16px;
-  }
   .btn-group.footable-actions {
 	position: absolute;
     width: 90vw !important;
@@ -244,6 +251,30 @@
 	  margin-right: 14px;
 	  white-space: normal;
   }
+  .clearfix {
+	  flex-basis: 100%;
+	  height: 0;
+  }
+  .btn-group > .btn-group {
+	  flex-basis: 100%;
+  }
+  .btn-group .btn {
+	display: flex !important;
+	align-items: center;
+	justify-content: center;
+  }
+  .btn-group .btn i {
+    margin-right: 5px;
+  }
+  .btn-group .btn .caret {
+	margin-left: 5px;
+  }
+  .panel-login .btn-group .btn {
+	  display: block !important;
+  }
+  .panel-login .clearfix {
+	  height: auto;
+  }
 }
 
 @media (max-width: 350px) {

data/web/js/site/quarantine.js

@@ -58,7 +58,7 @@ jQuery(function($){
         {"name":"score","title": lang.spam_score, "type": "text"},
         {"name":"notified","title":lang.notified, "type": "text"},
         {"name":"created","formatter":function unix_time_format(tm) { var date = new Date(tm ? tm * 1000 : 0); return date.toLocaleDateString(undefined, {year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit"});},"title":lang.received,"style":{"width":"170px"}},
-        {"name":"action","filterable": false,"sortable": false,"style":{"text-align":"right"},"style":{"min-width":"200px"},"type":"html","title":lang.action}
+        {"name":"action","filterable": false,"sortable": false,"style":{"text-align":"right"},"style":{"min-width":"250px"},"type":"html","title":lang.action,"breakpoints":"xs sm md"}
       ],
       "rows": $.ajax({
         dataType: 'json',
@@ -95,9 +95,9 @@ jQuery(function($){
               item.notified = '✖';
             }
             if (acl_data.login_as === 1) {
-            item.action = '<div class="btn-group">' +
+            item.action = '<div class="btn-group footable-actions">' +
-              '<a href="#" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-info show_qid_info"><i class="bi bi-box-arrow-up-right"></i> ' + lang.show_item + '</a>' +
+              '<a href="#" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-xs-half btn-info show_qid_info"><i class="bi bi-box-arrow-up-right"></i> ' + lang.show_item + '</a>' +
-              '<a href="#" data-action="delete_selected" data-id="del-single-qitem" data-api-url="delete/qitem" data-item="' + encodeURI(item.id) + '" class="btn btn-xs btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
+              '<a href="#" data-action="delete_selected" data-id="del-single-qitem" data-api-url="delete/qitem" data-item="' + encodeURI(item.id) + '" class="btn btn-xs  btn-xs-half btn-danger"><i class="bi bi-trash"></i> ' + lang.remove + '</a>' +
               '</div>';
             }
             else {