From fe96039ffb04db40b2e865a80638d1f421a884d7 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Tue, 22 Jul 2025 16:04:55 +0330
Subject: [PATCH] responsive

---
 src/index.css                 | 37 +++++++++++++++++++++++++++++++++++
 src/langs/fa.json             |  3 ++-
 src/pages/received/Detail.tsx |  2 +-
 src/shared/SideBar.tsx        | 10 ++++++++--
 4 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/index.css b/src/index.css
index faed859..06b74fe 100644
--- a/src/index.css
+++ b/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;
+  }
+}
diff --git a/src/langs/fa.json b/src/langs/fa.json
index b2dd9c8..55cbd17 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -12,7 +12,8 @@
     "spam": "هرزنامه ها",
     "setting": "تنظیمات",
     "logout": "خروج",
-    "new_message": "پیام جدید"
+    "new_message": "پیام جدید",
+    "settings": "تنظیمات"
   },
   "header": {
     "search": "جستجو",
diff --git a/src/pages/received/Detail.tsx b/src/pages/received/Detail.tsx
index a7aa514..15cecc9 100644
--- a/src/pages/received/Detail.tsx
+++ b/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(''))
                         }}
diff --git a/src/shared/SideBar.tsx b/src/shared/SideBar.tsx
index c1b127a..d02129b 100644
--- a/src/shared/SideBar.tsx
+++ b/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')}