chore: update Pagination component

src/components/Pagination.tsx

@@ -25,7 +25,7 @@ const PaginationButton = ({
     disabled={disabled}
     onClick={onClick}
     className={cn(
-      'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg text-sm font-semibold text-base-content/50 aspect-square',
+      'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
       'disabled:text-primary disabled:pointer-events-auto! disabled:cursor-not-allowed! disabled:bg-primary/10 disabled:active:translate-y-0'
     )}
   >
@@ -52,7 +52,7 @@ const EtcPaginationButton = ({
             tabIndex={0}
             role='button'
             className={cn(
-              'join-item btn btn-ghost p-2.5 rounded-lg text-sm font-medium text-gray-500 aspect-square'
+              'join-item btn btn-ghost p-2.5 rounded-lg! text-sm font-medium text-gray-500 aspect-square'
             )}
           >
             ...
@@ -61,7 +61,7 @@ const EtcPaginationButton = ({
           <div className='dropdown-content'>
             <ul
               tabIndex={0}
-              className='menu bg-base-100 rounded-lg z-1 w-fit min-w-max max-h-64 p-1 shadow-sm mb-2 overflow-y-auto flex-nowrap'
+              className='menu bg-base-100 rounded-lg! z-1 w-fit min-w-max max-h-64 p-1 shadow-sm mb-2 overflow-y-auto flex-nowrap'
             >
               {pages.map((pageNumber) => (
                 <li key={pageNumber}>
@@ -80,7 +80,7 @@ const EtcPaginationButton = ({
         <button
           disabled
           className={cn(
-            'join-item btn btn-ghost p-2.5 rounded-lg text-sm font-medium text-gray-500 aspect-square'
+            'join-item btn btn-ghost p-2.5 rounded-lg! text-sm font-medium text-gray-500 aspect-square'
           )}
         >
           ...
@@ -129,7 +129,7 @@ const Pagination = ({
       <select
         defaultValue={itemsPerPage}
         onChange={rowChangeHandler}
-        className='select select-xs w-fit text-base-content/50'
+        className='select select-xs w-fit pl-3 pr-7 text-base-content/50'
       >
         {rowOptions.map((rowOption, rowOptionIdx) => (
           <option
@@ -151,7 +151,7 @@ const Pagination = ({
       variant='ghost'
       color='none'
       className={cn(
-        'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg text-sm font-semibold text-base-content/50 aspect-square',
+        'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
         'disabled:bg-[initial]! disabled:text-base-content disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
       )}
     >
@@ -171,7 +171,7 @@ const Pagination = ({
       variant='ghost'
       color='none'
       className={cn(
-        'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg text-sm font-semibold text-base-content/50 aspect-square',
+        'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
         'disabled:bg-[initial]! disabled:text-base-content disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
       )}
     >
@@ -191,7 +191,7 @@ const Pagination = ({
       disabled={currentPage === totalPages}
       onClick={lastPageClickHandler}
       className={cn(
-        'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg text-sm font-semibold text-base-content/50 aspect-square',
+        'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
         'disabled:bg-[initial]! disabled:text-base-content disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
       )}
     >
@@ -211,7 +211,7 @@ const Pagination = ({
       disabled={currentPage === totalPages}
       onClick={onNextPage}
       className={cn(
-        'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg text-sm font-semibold text-base-content/50 aspect-square',
+        'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
         'disabled:bg-[initial]! disabled:text-base-content disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
       )}
     >
@@ -233,16 +233,16 @@ const Pagination = ({
   return (
     <div className='@container'>
       <div className='flex flex-row justify-center items-center'>
-        <div className='hidden @lg:block'>
+        <div className='hidden @md:block'>
           <DisplayedRowCountSelect />
         </div>
 
-        <div className='join w-full justify-end @lg:justify-center items-center gap-0.5'>
+        <div className='join w-full justify-end @md:justify-center items-center gap-0.5'>
-          <div className='hidden @lg:block'>
+          <div className='hidden @md:block'>
             <GoToFirstPageButton />
           </div>
 
-          <div className='hidden @lg:block'>
+          <div className='hidden @md:block'>
             <PrevPageButton />
           </div>
 
@@ -390,21 +390,21 @@ const Pagination = ({
             </>
           )}
 
-          <div className='hidden @lg:block'>
+          <div className='hidden @md:block'>
             <NextPageButton />
           </div>
 
-          <div className='hidden @lg:block'>
+          <div className='hidden @md:block'>
             <GoToLastPageButton />
           </div>
         </div>
 
-        <div className='hidden @lg:block'>
+        <div className='hidden @md:block'>
           <PageInfo />
         </div>
       </div>
 
-      <div className='flex @lg:hidden flex-col justify-center items-end gap-2'>
+      <div className='flex @md:hidden flex-col justify-center items-end gap-2'>
         <div className='flex flex-row items-center gap-0.5'>
           <GoToFirstPageButton />
           <PrevPageButton />