Bug 27814: (follow-up) Adjust container padding, button flow

This patch makes minor changes to the SCSS so that the user summary
page's DataTables button flow better at very narrow widths.

Also, the main container should have less padding at narrow widths.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss

@@ -299,11 +299,15 @@ textarea,
     }
 }
 
+.dt-buttons {
+    display: flex;
+    flex-wrap: wrap;
+}
+
 .dt-button {
     background-color: transparent;
     border: 0;
     color: #0088cc;
-    display: inline-block;
     line-height: 20px;
     padding: 4px 12px;
     text-align: center;

koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss

@@ -18,6 +18,7 @@
     .input-fluid {
         width: 90%;
     }
+
 }
 
 @media only screen and ( min-width: 342px ) and ( max-width: 479px ) {
@@ -80,10 +81,6 @@
         float: none;
         margin: 0;
     }
-
-    .dt-buttons {
-        display: flex;
-    }
 }
 
 @media only screen and ( max-width: 608px ) {
@@ -191,7 +188,7 @@
     .main {
         @include border-radius-all( 0 );
         margin: 0;
-        padding: 15px;
+        padding: 0;
     }
 
     .breadcrumb {
@@ -207,6 +204,10 @@
         font-weight: bold;
     }
 
+    .ui-tabs .ui-tabs-panel {
+        padding: .5em;
+    }
+
     .ui-tabs-panel,
     .tabs-container,
     #topissues,
@@ -272,14 +273,6 @@
     #checkouts_filter {
         display: block;
     }
-
-    .table_controls {
-        display: block;
-
-        label {
-            display: block;
-        }
-    }
 }
 
 @media only screen and ( max-width: 700px ) {
@@ -424,6 +417,14 @@
     #wrapper {
         padding: 0;
     }
+
+    .table_controls {
+        display: block;
+
+        label {
+            display: block;
+        }
+    }
 }
 
 @media only screen and ( max-width: 800px ) {