From 7f100c2dce525901c29e87c56744ca30dbcf68e9 Mon Sep 17 00:00:00 2001
From: Hammat Wele <hammat.wele@inlibro.com>
Date: Wed, 14 Dec 2022 12:39:54 +0000
Subject: [PATCH] Bug 31221: Buttons overflow in OPAC search results in mobile
 view

To reproduce:
1- Have at least 10 record of the same type that can be viewed from OPAC
2- Go to administration > system preferences > OPACnumSearchResults and set it to 1
3- Go to the OPAC and search for the type from step 1
4- Notice top and bottom page selections are numbered from 1 to 10 + Next >> + Last >>
5- Inspect the webpage and switch to mobile view
6- Reduce display width and notice the buttons (of step 4) on the right are overflowing the screen
7- Apply the patch
8- compile the .scss file 'yarn build --view opac'
9- Clear your navigator caches
10- repeat step 3,5 and 6
11- Notice the buttons (of step 4) are no more overflowing the screen

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
---
 koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
index 58c80143af1..779e9947adc 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
@@ -586,3 +586,10 @@
         display: none;
     }
 }
+
+@media (max-width: 608px) {
+	#top-pages > .pagination > .pagination,
+	#bottom-pages > .pagination > .pagination {
+	    flex-wrap: wrap;
+	}
+}
\ No newline at end of file
-- 
2.30.2