diff --git a/client/src/shared/ui/NotificationStack/NotificationStack.tsx b/client/src/shared/ui/NotificationStack/NotificationStack.tsx index bd1fef7..6ff1266 100644 --- a/client/src/shared/ui/NotificationStack/NotificationStack.tsx +++ b/client/src/shared/ui/NotificationStack/NotificationStack.tsx @@ -1,9 +1,11 @@ import CloseIcon from '@mui/icons-material/Close' -import { Snackbar, Alert, Stack, IconButton, Button } from '@mui/material' +import { Snackbar, Alert, IconButton, Button } from '@mui/material' import { useUnit } from 'effector-react' import { useNavigate } from 'react-router-dom' import { $notifications, dismissNotification as dismissNotificationEvent } from '../../model/notification' +const GAP = 76 + export function NotificationStack() { const notifications = useUnit($notifications) const dismissNotification = useUnit(dismissNotificationEvent) @@ -12,27 +14,18 @@ export function NotificationStack() { if (notifications.length === 0) return null return ( - - {notifications.map((n) => ( + <> + {notifications.map((n, index) => ( dismissNotification(n.id)} anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} - sx={{ position: 'static' }} + sx={{ + bottom: `${88 + (notifications.length - 1 - index) * GAP}px !important`, + zIndex: 2000 + index, + }} > dismissNotification(n.id)} sx={{ width: '100%', + minWidth: 360, + maxWidth: 440, px: 2, py: 1.5, alignItems: 'center', @@ -100,6 +95,6 @@ export function NotificationStack() { ))} - + ) } diff --git a/server/prisma/prisma/dev.db b/server/prisma/prisma/dev.db index 4c1a5c9..4f891b6 100644 Binary files a/server/prisma/prisma/dev.db and b/server/prisma/prisma/dev.db differ