reponsive and selective actions and row actioin + pagination

src/pages/sent/List.tsx

@@ -29,19 +29,32 @@ const List: FC = () => {
             title: 'عنوان پیام',
             render: (item) => (
                 <div className="flex items-center">
-                    {!item.read && <div className="w-2 h-2 rounded-full bg-blue-500 mr-2" />}
-                    <span>{item.title}</span>
+                    {!item.read && <div className="w-1.5 h-1.5 md:w-2 md:h-2 rounded-full bg-blue-500 mr-2" />}
+                    <span className="truncate">{item.title}</span>
                 </div>
             )
         },
-        { key: 'sender', title: 'فرستنده' },
-        { key: 'date', title: 'تاریخ', align: 'center' },
+        {
+            key: 'sender',
+            title: 'فرستنده',
+            render: (item) => (
+                <span className="truncate">{item.sender}</span>
+            )
+        },
+        {
+            key: 'date',
+            title: 'تاریخ',
+            align: 'center',
+            render: (item) => (
+                <span className="text-xs md:text-sm">{item.date}</span>
+            )
+        },
     ];
 
     const tableActions = (
-        <div className='flex items-center gap-4'>
-            <Refresh2 size={20} color='black' />
-            <More size={20} color='black' className='rotate-90' />
+        <div className='flex items-center gap-2 md:gap-4'>
+            <Refresh2 size={18} color='black' className="cursor-pointer" />
+            <More size={18} color='black' className='rotate-90 cursor-pointer' />
         </div>
     );
 
@@ -50,8 +63,8 @@ const List: FC = () => {
     };
 
     return (
-        <div className='mt-4'>
-            <h1>{t('sent.title')}</h1>
+        <div className='mt-2 md:mt-4 px-2 md:px-0'>
+            <h1 className="text-lg md:text-xl xl:text-2xl font-bold mb-4 md:mb-0">{t('sent.title')}</h1>
 
             <Filters
                 fields={[
@@ -70,7 +83,6 @@ const List: FC = () => {
                     { type: 'input', name: 'search', placeholder: t('sent.search') }
                 ]}
                 onChange={handleFilterChange}
-                className="mt-8 flex justify-between items-center"
                 searchField="search"
             />
 
@@ -83,8 +95,8 @@ const List: FC = () => {
                 onRowClick={(id) => console.log(`کلیک روی پیام با شناسه ${id}`)}
                 noDataMessage={
                     <div className="flex flex-col items-center py-6">
-                        <InfoCircle size={40} className="text-gray-300 mb-2" />
-                        <div>هیچ پیامی یافت نشد</div>
+                        <InfoCircle size={32} className="text-gray-300 mb-2" />
+                        <div className="text-sm">هیچ پیامی یافت نشد</div>
                     </div>
                 }
                 selectable={true}