From 3c56fb226101554c9acf34f4f318f1c26f34babd Mon Sep 17 00:00:00 2001
From: Justyna <46591755+justyna-13@users.noreply.github.com>
Date: Thu, 5 Oct 2023 07:11:11 +0200
Subject: [PATCH] fix: pagination buttons are too small (#3004)

---
 .../next/pages/showcases/Pagination/Pagination.tsx     | 10 +++++-----
 .../nuxt/pages/showcases/Pagination/Pagination.vue     | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/preview/next/pages/showcases/Pagination/Pagination.tsx b/apps/preview/next/pages/showcases/Pagination/Pagination.tsx
index 2dcca8375d..8a19b4cea4 100644
--- a/apps/preview/next/pages/showcases/Pagination/Pagination.tsx
+++ b/apps/preview/next/pages/showcases/Pagination/Pagination.tsx
@@ -40,7 +40,7 @@ export function Showcase() {
             >
               <button
                 type="button"
-                className="px-3 sm:px-4 py-3 rounded-md text-neutral-500 md:w-12 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
+                className="min-w-[38px] px-3 sm:px-4 py-3 rounded-md text-neutral-500 md:w-12 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
                 aria-current={selectedPage === 1}
                 onClick={() => setPage(1)}
               >
@@ -70,7 +70,7 @@ export function Showcase() {
                 <div className="flex pt-1 border-t-4 border-transparent">
                   <button
                     type="button"
-                    className="px-3 sm:px-4 py-3 rounded-md text-neutral-500 md:w-12 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 "
+                    className="min-w-[38px] px-3 sm:px-4 py-3 rounded-md text-neutral-500 md:w-12 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 "
                     aria-current={endPage - 1 === selectedPage}
                     onClick={() => setPage(endPage - 1)}
                   >
@@ -88,7 +88,7 @@ export function Showcase() {
                 <button
                   type="button"
                   className={classNames(
-                    'px-3 sm:px-4 py-3 text-neutral-500 md:w-12 rounded-md hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900',
+                    'min-w-[38px] px-3 sm:px-4 py-3 text-neutral-500 md:w-12 rounded-md hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900',
                     { '!text-neutral-900 hover:!text-primary-800 active:!text-primary-900': selectedPage === page },
                   )}
                   aria-label={`Page ${page} of ${totalPages}`}
@@ -104,7 +104,7 @@ export function Showcase() {
                 <div className="flex pt-1 border-t-4 border-transparent">
                   <button
                     type="button"
-                    className="px-3 sm:px-4 py-3 rounded-md text-neutral-500 md:w-12 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 "
+                    className="min-w-[38px] px-3 sm:px-4 py-3 rounded-md text-neutral-500 md:w-12 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 "
                     aria-current={selectedPage === 1}
                     onClick={() => setPage(2)}
                   >
@@ -138,7 +138,7 @@ export function Showcase() {
             >
               <button
                 type="button"
-                className="px-3 sm:px-4 py-3 rounded-md text-neutral-500 md:w-12 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 "
+                className="min-w-[38px] px-3 sm:px-4 py-3 rounded-md text-neutral-500 md:w-12 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 "
                 aria-current={totalPages === selectedPage}
                 onClick={() => setPage(totalPages)}
               >
diff --git a/apps/preview/nuxt/pages/showcases/Pagination/Pagination.vue b/apps/preview/nuxt/pages/showcases/Pagination/Pagination.vue
index e4b281ba8e..18bce911a0 100644
--- a/apps/preview/nuxt/pages/showcases/Pagination/Pagination.vue
+++ b/apps/preview/nuxt/pages/showcases/Pagination/Pagination.vue
@@ -23,7 +23,7 @@
         >
           <button
             type="button"
-            class="px-3 sm:px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
+            class="min-w-[38px] px-3 sm:px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
             :aria-current="selectedPage === 1"
             @click="setPage(1)"
           >
@@ -42,7 +42,7 @@
         <div class="flex pt-1 border-t-4 border-transparent">
           <button
             type="button"
-            class="px-3 sm:px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
+            class="min-w-[38px] px-3 sm:px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
             :aria-current="endPage - 1 === selectedPage"
             @click="setPage(endPage - 1)"
           >
@@ -60,7 +60,7 @@
           <button
             type="button"
             :class="[
-              'px-3 sm:px-4 py-3 md:w-12 text-neutral-500 rounded-md hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900',
+              'min-w-[38px] px-3 sm:px-4 py-3 md:w-12 text-neutral-500 rounded-md hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900',
               { '!text-neutral-900 hover:!text-primary-800 active:!text-primary-900': selectedPage === page },
             ]"
             :aria-label="`Page ${page} of ${totalPages}`"
@@ -75,7 +75,7 @@
         <div class="flex pt-1 border-t-4 border-transparent">
           <button
             type="button"
-            class="px-3 sm:px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
+            class="min-w-[38px] px-3 sm:px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
             :aria-label="`Page 2 of ${totalPages}`"
             @click="setPage(2)"
           >
@@ -99,7 +99,7 @@
         >
           <button
             type="button"
-            class="px-3 sm:px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
+            class="min-w-[38px] px-3 sm:px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
             :aria-current="totalPages === selectedPage"
             @click="setPage(totalPages)"
           >