notification

src/pages/notification/Notification.tsx

@@ -14,6 +14,7 @@ import Button from '../../components/Button';
 import { toast } from '../../components/Toast';
 // import { useNavigate } from 'react-router-dom';
 import { ErrorType } from '../../helpers/types';
+import { useSharedStore } from '@/shared/store/sharedStore';
 const Notifications: FC = () => {
     // const navigate = useNavigate()
     const { t } = useTranslation();
@@ -22,6 +23,7 @@ const Notifications: FC = () => {
     const [showModal, setShowModal] = useState<boolean>(false);
     const { data, fetchNextPage, hasNextPage, refetch } = useGetNotification(activeTab);
     const readAll = useReadAll()
+    const { emailWidth } = useSharedStore()
     const posts = data?.pages.flatMap((page) => page.data?.notifications) || [];
 
     const handleAllRead = () => {
@@ -89,7 +91,14 @@ const Notifications: FC = () => {
             </div>
 
             {showModal && (
-                <div id='notificationsContainer' className="xl:h-[calc(100%-110px)] h-[70%] p-6 z-[300] xl:w-[300px] w-full xl:left-7 left-0 xl:top-[90px] top-0 overflow-y-auto xl:rounded-3xl rounded-b-3xl rounded-t-none fixed modalGlass3 ">
+                <div
+                    id='notificationsContainer'
+                    className={clx(
+                        "xl:h-[calc(100%-110px)] h-[70%] p-6 z-[300] xl:w-[300px] w-full xl:left-7 left-0 xl:top-[90px] top-0 overflow-y-auto xl:rounded-3xl rounded-b-3xl rounded-t-none fixed modalGlass3",
+                        emailWidth > 0 ? 'xl:left-auto' : 'w-full'
+                    )}
+                    style={emailWidth > 0 && window.innerWidth > 1280 ? { left: `${emailWidth - 50}px` } : {}}
+                >
                     <div className="flex justify-between items-center">
                         <div>{t('notif.natification')}</div>
                         <div className="size-7 rounded-full bg-white/30 dark:bg-white/10 flex justify-center items-center">