From 854f439bf972bac71bcf94cb956381eb2a365fca Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Sun, 24 May 2026 21:28:03 +0330
Subject: [PATCH] fix(pagination): remove floating style from pagination
 component

---
 src/components/Pagination.tsx | 68 +++++++++++++++++------------------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index 28e9a00..cc53059 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -4,33 +4,33 @@ import { useTranslation } from '../hooks/useTranslation';
 import { cn } from '../lib/utils';
 import { Select } from './ui/Select';
 import { Button } from './ui/button';
-
-interface PaginationProps {
-  currentPage: number;
-  totalCount: number;
-  limit: number;
-  onPageChange: (page: number) => void;
-  onLimitChange: (limit: number) => void;
-  pageSizeOptions?: number[];
-}
-
+
+interface PaginationProps {
+  currentPage: number;
+  totalCount: number;
+  limit: number;
+  onPageChange: (page: number) => void;
+  onLimitChange: (limit: number) => void;
+  pageSizeOptions?: number[];
+}
+
 export const Pagination: React.FC<PaginationProps> = ({
-  currentPage,
-  totalCount,
-  limit,
-  onPageChange,
-  onLimitChange,
-  pageSizeOptions = [10, 20, 50],
-}) => {
-  const { t, lang } = useTranslation();
-  const isFa = lang === 'fa';
-  
-  const toPersianNum = (num: string | number | undefined | null) => {
-    if (num === null || num === undefined) return num;
-    if (!isFa) return num;
-    return num.toString().replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d as any]);
-  };
-
+  currentPage,
+  totalCount,
+  limit,
+  onPageChange,
+  onLimitChange,
+  pageSizeOptions = [10, 20, 50],
+}) => {
+  const { t, lang } = useTranslation();
+  const isFa = lang === 'fa';
+  
+  const toPersianNum = (num: string | number | undefined | null) => {
+    if (num === null || num === undefined) return num;
+    if (!isFa) return num;
+    return num.toString().replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d as any]);
+  };
+
   const totalPages = Math.ceil(totalCount / limit) || 1;
 
   if (totalCount === 0) return null;
@@ -63,8 +63,8 @@ export const Pagination: React.FC<PaginationProps> = ({
   }, [currentPage, totalPages]);
 
   return (
-    <div className="sticky bottom-0 left-0 right-0 z-10 mt-auto -mx-4 border-t border-slate-200/80 bg-white/90 px-4 py-4 backdrop-blur-xl dark:border-slate-800/80 dark:bg-slate-950/90 sm:mx-0 sm:rounded-3xl sm:border sm:px-5">
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+    <div className="sticky bottom-0 left-0 right-0 z-10 mt-auto -mx-4 border-t border-slate-200/80 bg-white/95 px-4 py-3 shadow-[0_-10px_30px_rgba(15,23,42,0.06)] backdrop-blur-xl dark:border-slate-800/80 dark:bg-slate-950/95 dark:shadow-[0_-10px_30px_rgba(0,0,0,0.24)] md:-mx-6 md:px-6">
+      <div className="mx-auto flex w-full max-w-7xl gap-3 flex-row items-center justify-between">
         <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between lg:justify-start">
           <div className="flex items-center gap-3">
             <Select
@@ -78,9 +78,9 @@ export const Pagination: React.FC<PaginationProps> = ({
                 label: String(toPersianNum(option)),
               }))}
               className="w-24 shrink-0"
-              buttonClassName="h-10 rounded-2xl border-slate-200 bg-slate-50 font-medium text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200"
+              buttonClassName="h-9 rounded-lg border-slate-200 bg-slate-50 font-medium text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200"
             />
-            <span className="inline-flex h-10 items-center rounded-2xl border border-slate-200 bg-slate-50 px-4 text-sm font-medium text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 sm:hidden">
+            <span className="inline-flex h-9 items-center rounded-lg border border-slate-200 bg-slate-50 px-3 text-sm font-medium text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 sm:hidden">
               {toPersianNum(currentPage)} / {toPersianNum(totalPages)}
             </span>
           </div>
@@ -98,7 +98,7 @@ export const Pagination: React.FC<PaginationProps> = ({
                   type="button"
                   onClick={() => onPageChange(pageItem)}
                   className={cn(
-                    'inline-flex h-10 min-w-10 items-center justify-center rounded-2xl border px-3 text-sm font-semibold transition-colors',
+                    'inline-flex h-9 min-w-9 items-center justify-center rounded-lg border px-3 text-sm font-semibold transition-colors',
                     pageItem === currentPage
                       ? 'border-sky-500 bg-sky-500 text-white shadow-sm'
                       : 'border-slate-200 bg-slate-50 text-slate-600 hover:border-slate-300 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:bg-slate-800',
@@ -109,7 +109,7 @@ export const Pagination: React.FC<PaginationProps> = ({
               ) : (
                 <span
                   key={`${pageItem}-${index}`}
-                  className="inline-flex h-10 min-w-10 items-center justify-center rounded-2xl text-slate-400 dark:text-slate-500"
+                  className="inline-flex h-9 min-w-9 items-center justify-center rounded-lg text-slate-400 dark:text-slate-500"
                 >
                   <MoreHorizontal className="h-4 w-4" />
                 </span>
@@ -123,7 +123,7 @@ export const Pagination: React.FC<PaginationProps> = ({
               size="sm"
               onClick={() => onPageChange(currentPage - 1)}
               disabled={currentPage === 1}
-              className="h-10 rounded-2xl border-slate-200 bg-slate-50 px-4 text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
+              className="h-9 rounded-lg border-slate-200 bg-slate-50 px-3 text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
             >
               <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
               {t.pagination?.previous || 'Previous'}
@@ -138,7 +138,7 @@ export const Pagination: React.FC<PaginationProps> = ({
               size="sm"
               onClick={() => onPageChange(currentPage + 1)}
               disabled={currentPage >= totalPages}
-              className="h-10 rounded-2xl border-slate-200 bg-slate-50 px-4 text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
+              className="h-9 rounded-lg border-slate-200 bg-slate-50 px-3 text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
             >
               {t.pagination?.next || 'Next'}
               <ChevronRight className="h-4 w-4 rtl:rotate-180" />