From a1a64b11db2f0a5f7e859afb274a365610680536 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.
---
 koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss |  6 ++++-
 .../opac-tmpl/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 91d326a909..5f1bab6cff 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.11.0