From ff317f4e375db08bcee7d8879791d9da59de6298 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Fri, 5 Mar 2021 13:40:13 +0000
Subject: [PATCH] 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>
---
 .../opac-tmpl/bootstrap/css/src/_common.scss  |  6 ++++-
 .../bootstrap/css/src/_responsive.scss        | 27 ++++++++++---------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
index 65e238d80b..1d0c0a9419 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
+++ b/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;
diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
index 60f42f4dda..ad2013e717 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
+++ b/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 ) {
-- 
2.20.1