From 364af7a5580a89315358100a3dbf09660c37786c Mon Sep 17 00:00:00 2001
From: Geriano <gerznewbie@gmail.com>
Date: Fri, 2 Sep 2022 08:33:51 +0700
Subject: [PATCH] fix bug pagination links is overflown

---
 resources/js/Components/DataTable/Builder.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/resources/js/Components/DataTable/Builder.vue b/resources/js/Components/DataTable/Builder.vue
index 4c5d461..2ce8bb3 100644
--- a/resources/js/Components/DataTable/Builder.vue
+++ b/resources/js/Components/DataTable/Builder.vue
@@ -170,8 +170,15 @@ onUpdated(() => rounded())
           Displaying from {{ paginator.from }} to {{ paginator.to }} in total {{ paginator.total }}
         </p>
 
-        <div ref="links" class="w-full flex items-center justify-end overflow-auto">
-          <button v-for="(link, i) in paginator.links" :key="i" @click.prevent="goTo(link)" class="flex-none hover:bg-gray-100 dark:hover:bg-gray-600 px-2 py-1 transition-all" :class="link.active ? 'bg-gray-300 dark:bg-gray-900' : 'bg-gray-200 dark:bg-gray-800'" v-html="link.label"></button>
+        <div ref="links" class="w-full flex items-center flex-wrap justify-end">
+          <button
+            v-for="(link, i) in paginator.links"
+            :key="i"
+            @click.prevent="goTo(link)"
+            class="flex-none border border-gray-300 dark:border-gray-900 px-2 py-1 transition-all uppercase my-[1px] flex-grow text-sm"
+            :class="link.active ? 'bg-gray-300 dark:bg-gray-900' : 'bg-gray-200 dark:bg-gray-800'"
+            v-html="link.label"
+          />
         </div>
       </div>
     </Transition>