From 76b32f551fefa34ffed6129fcca240f0991873e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Thu, 7 Apr 2022 11:42:14 +0200
Subject: [PATCH] responsive paginator fix

---
 .../js/components/Others/Tables/DatatableWrapper.vue      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/Others/Tables/DatatableWrapper.vue b/resources/js/components/Others/Tables/DatatableWrapper.vue
index 1767071c..5fe0c8e6 100644
--- a/resources/js/components/Others/Tables/DatatableWrapper.vue
+++ b/resources/js/components/Others/Tables/DatatableWrapper.vue
@@ -39,9 +39,9 @@
         <slot v-if="!isLoading && !hasData" name="empty-page"></slot>
 
         <!--Paginator-->
-        <div v-if="paginator && hasData" class="mt-6 flex items-center justify-between">
+        <div v-if="paginator && hasData" class="mt-6 sm:flex sm:items-center sm:justify-between">
             <!--Show if there is only 6 pages-->
-            <ul v-if="data.meta.total > 15 && data.meta.last_page <= 6" class="pagination flex items-center">
+            <ul v-if="data.meta.total > 15 && data.meta.last_page <= 6" class="pagination flex justify-center items-center">
                 <!--Go previous icon-->
                 <li class="previous inline-block p-1">
                     <a
@@ -86,7 +86,7 @@
             </ul>
 
             <!--Show if there is more than 6 pages-->
-            <ul v-if="data.meta.total > 15 && data.meta.last_page > 6" class="pagination flex items-center">
+            <ul v-if="data.meta.total > 15 && data.meta.last_page > 6" class="pagination flex justify-center items-center">
                 <!--Go previous icon-->
                 <li class="previous inline-block p-1">
                     <a
@@ -191,7 +191,7 @@
                 </li>
             </ul>
 
-            <span class="text-xs text-gray-600 dark:text-gray-500">
+            <span class="text-xs text-gray-600 dark:text-gray-500 block text-center sm:mt-0 mt-4">
 				{{ $t('paginator', {from: data.meta.from, to: data.meta.to, total: data.meta.total}) }}
             </span>
         </div>