fix: use native Snackbar positioning for NotificationStack instead of custom Stack wrapper

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 (
-    <Stack
+    <>
-      spacing={1.5}
+      {notifications.map((n, index) => (
-      sx={{
-        position: 'fixed',
-        bottom: 88,
-        left: '50%',
-        transform: 'translateX(-50%)',
-        zIndex: 2000,
-        width: 'auto',
-        minWidth: 360,
-        maxWidth: 440,
-      }}
-    >
-      {notifications.map((n) => (
         <Snackbar
           key={n.id}
           open
           autoHideDuration={n.autoHideDuration}
           onClose={() => dismissNotification(n.id)}
           anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-          sx={{ position: 'static' }}
+          sx={{
+            bottom: `${88 + (notifications.length - 1 - index) * GAP}px !important`,
+            zIndex: 2000 + index,
+          }}
         >
           <Alert
             severity={n.type}
@@ -40,6 +33,8 @@ export function NotificationStack() {
             onClose={() => dismissNotification(n.id)}
             sx={{
               width: '100%',
+              minWidth: 360,
+              maxWidth: 440,
               px: 2,
               py: 1.5,
               alignItems: 'center',
@@ -100,6 +95,6 @@ export function NotificationStack() {
           </Alert>
         </Snackbar>
       ))}
-    </Stack>
+    </>
   )
 }