responsive

src/index.css

@@ -351,3 +351,40 @@ textarea::placeholder {
 strong {
   font-weight: bold;
 }
+
+/* استایل‌های ریسپانسیو برای محتوای ایمیل */
+.email-content-container {
+  max-width: 100%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.email-content-container table {
+  width: 100% !important;
+  border-collapse: collapse;
+  table-layout: auto;
+}
+
+.email-content-container td,
+.email-content-container th {
+  word-wrap: break-word !important;
+  overflow-wrap: break-word !important;
+  padding: 8px !important;
+  font-size: inherit !important;
+}
+
+/* در حالت موبایل */
+@media (max-width: 768px) {
+  .email-content-container table {
+    min-width: 100%;
+    font-size: 12px !important;
+  }
+
+  .email-content-container td,
+  .email-content-container th {
+    max-width: 120px !important;
+    padding: 4px !important;
+    font-size: 12px !important;
+    line-height: 1.4;
+  }
+}

src/langs/fa.json

@@ -12,7 +12,8 @@
     "spam": "هرزنامه ها",
     "setting": "تنظیمات",
     "logout": "خروج",
-    "new_message": "پیام جدید"
+    "new_message": "پیام جدید",
+    "settings": "تنظیمات"
   },
   "header": {
     "search": "جستجو",

src/pages/received/Detail.tsx

@@ -179,7 +179,7 @@ const DetailEmail: FC = () => {
             <div className='xl:mt-8 mt-3 text-[13px] leading-7 font-light'>
                 {messageDetail.html && messageDetail.html.length > 0 ? (
                     <div
-                        className='email-content-container border border-gray-200 rounded-lg p-4 overflow-hidden'
+                        className='email-content-container border border-gray-200 rounded-lg p-4 overflow-x-auto overflow-y-hidden'
                         style={{
                             direction: detectTextDirection(messageDetail.html.join(''))
                         }}

src/shared/SideBar.tsx

@@ -1,12 +1,12 @@
 import { FC } from 'react'
 import LogoImage from '../assets/images/logo.svg'
-import { Add, ArchiveTick, DirectInbox, DirectSend, Edit, InfoCircle, Logout, Star1, Trash } from 'iconsax-react'
+import { Add, ArchiveTick, DirectInbox, DirectSend, Edit, InfoCircle, Logout, Star1, Trash, Setting2 } from 'iconsax-react'
 import SideBarItem from './SideBarItem'
+import { Paths } from '@/utils/Paths'
 import { useLocation } from 'react-router-dom'
 import { useSharedStore } from './store/sharedStore'
 import { clx } from '../helpers/utils'
 import { useTranslation } from 'react-i18next'
-import { Paths } from '@/utils/Paths'
 import Button from '@/components/Button'
 
 const SideBar: FC = () => {
@@ -114,6 +114,12 @@ const SideBar: FC = () => {
 
                     <div className='flex-1 flex flex-col justify-end mt-10 md:mt-14 pb-6 md:pb-8'>
                         <div className='text-xs text-[#8C90A3]'>
+                            <SideBarItem
+                                icon={<Setting2 variant={isActive('settings') ? 'Bold' : 'Outline'} color={isActive('settings') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                title={t('sidebar.settings')}
+                                isActive={isActive('settings')}
+                                link={Paths.setting}
+                            />
                             <SideBarItem
                                 icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                 title={t('sidebar.logout')}