@astral/ui 4.41.0 → 4.42.0

package/components/Notification/Notification.js

@@ -5,6 +5,7 @@ import { getClassNameModifierByVariant, getNotifyOptions } from './utils';
 const leave = cssTransition({
     enter: notifyClassnames.animationIn,
     exit: notifyClassnames.animationOut,
+    collapse: false,
 });
 export const notify = {
     success: (title, { icon, ...options } = {}) => toast(({ toastProps }) => NOTIFICATION_VARIANT.success({ ...options, icon, title }, toastProps), {

package/components/Notification/NotificationContainer/styles.js

@@ -1,6 +1,6 @@
 import { ToastContainer } from 'react-toastify-next';
 import { keyframes, styled } from '../../styled';
-import { NOTIFY_HEIGHT, NotificationVariantTypes, notifyClassnames, } from '../constants';
+import { NOTIFY_HEIGHT, NOTIFY_HEIGHT_MOBILE, NotificationVariantTypes, notifyClassnames, } from '../constants';
 const leaveIn = keyframes `
   from {
     transform: translateX(100%);
@@ -46,23 +46,28 @@ export const Wrapper = styled('div', {
       `}
   }
 
+  .Toastify__toast-container {
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      padding: ${({ theme }) => theme.spacing(4)};
+    }
+  }
+
   .${notifyClassnames.animationIn} {
-    animation: ${leaveIn} ease-in-out 0.34s;
+    animation: ${leaveIn} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
     animation-fill-mode: both;
 
     ${({ theme }) => theme.breakpoints.down('sm')} {
-      animation: ${leaveInMobile} ease-in-out 0.34s;
+      animation: ${leaveInMobile} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
       animation-fill-mode: both;
     }
   }
 
   .${notifyClassnames.animationOut} {
-    animation: ${leaveOut} ease-in-out 0.34s;
+    animation: ${leaveOut} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
     animation-fill-mode: both;
   }
 
   .${notifyClassnames.root} {
-    min-height: ${NOTIFY_HEIGHT};
     margin-bottom: ${({ theme }) => theme.spacing(1)};
     padding: 0;
 
@@ -81,6 +86,12 @@ export const Wrapper = styled('div', {
       width: 100%;
       height: 3px;
     }
+      ${({ theme }) => theme.breakpoints.up('sm')} {
+      min-height: ${NOTIFY_HEIGHT};
+    }
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      min-height: ${NOTIFY_HEIGHT_MOBILE};
+    }
 
     ${({ theme }) => theme.breakpoints.down('sm')} {
       margin-bottom: ${({ theme }) => theme.spacing(3)};

package/components/Notification/NotificationStackContainer/NotificationStackContainer.js

@@ -8,12 +8,12 @@ if (typeof window !== 'undefined') {
     injectStyle();
 }
 export const NotificationStackContainer = ({ containerId = NOTIFY_CONTAINER_ID, staticContainerId = NOTIFY_STATIC_CONTAINER_ID, bannerContainer, closeButton, ...props }) => {
-    const { isVisibleCloseButton, isHoveredContainer, isStartedClosingNotify, closeAll, } = useLogic({
+    const { isVisibleCloseButton, isStackExpanded, isStartedClosingNotify, closeAll, } = useLogic({
         containerId,
     });
     return (_jsxs(Wrapper, { className: classNames({
-            [notifyClassnames.container]: isHoveredContainer,
-        }), children: [_jsx(Inner, { ...props, ...{ stacked: true }, containerId: containerId, pauseOnFocusLoss: true, position: NOTIFY_POSITIONS.BOTTOM_RIGHT, newestOnTop: false, closeOnClick: false, draggable: false, rtl: false, closeButton: false, bodyClassName: `${notifyClassnames.body}`, toastClassName: notifyClassnames.root, progressClassName: `${notifyClassnames.progress}` }), isVisibleCloseButton && (_jsx(CloseButton, { size: "small", variant: "light", color: "grey", className: classNames({
+            [notifyClassnames.container]: isStackExpanded,
+        }), children: [_jsx("div", { className: notifyClassnames.stackHost, children: _jsx(Inner, { ...props, className: classNames(notifyClassnames.stack, props.className), ...{ stacked: true }, containerId: containerId, pauseOnFocusLoss: true, position: NOTIFY_POSITIONS.BOTTOM_RIGHT, newestOnTop: false, closeOnClick: false, draggable: false, rtl: false, closeButton: false, bodyClassName: `${notifyClassnames.body}`, toastClassName: notifyClassnames.root, progressClassName: `${notifyClassnames.progress}` }) }), isVisibleCloseButton && (_jsx(CloseButton, { size: "small", variant: "light", color: "grey", className: classNames({
                     [notifyClassnames.closeButtonAnimationOut]: isStartedClosingNotify,
                 }), onClick: closeAll, children: "\u0421\u043A\u0440\u044B\u0442\u044C \u0432\u0441\u0435" })), _jsx(StaticInner, { containerId: staticContainerId, position: NOTIFY_POSITIONS.BOTTOM_RIGHT, newestOnTop: false, closeOnClick: false, draggable: false, rtl: false, closeButton: false, bodyClassName: `${notifyClassnames.body}`, toastClassName: notifyClassnames.root, progressClassName: `${notifyClassnames.progress}` }), bannerContainer] }));
 };

package/components/Notification/NotificationStackContainer/styles.js

@@ -1,7 +1,7 @@
 import { ToastContainer } from 'react-toastify-next';
 import { Button } from '../../Button';
 import { keyframes, styled } from '../../styled';
-import { NOTIFY_HEIGHT, NOTIFY_NO_TRANSITION_ATTR, NotificationVariantTypes, notifyClassnames, } from '../constants';
+import { NOTIFY_HEIGHT, NOTIFY_HEIGHT_MOBILE, NOTIFY_NO_TRANSITION_ATTR, NotificationVariantTypes, notifyClassnames, } from '../constants';
 const fade = keyframes `
   from {
     opacity: 0;
@@ -30,6 +30,16 @@ const leaveOut = keyframes `
     visibility: hidden;
   }
 `;
+/** Сохраняем scale stacked (--s), иначе при старте exit transform из keyframes затирает scale и карточка визуально «прыгает» вправо */
+const leaveOutMobileStacked = keyframes `
+  from {
+    transform: translateX(0) scale(var(--s, 1));
+  }
+  to {
+    transform: translateX(100%) scale(var(--s, 1));
+    visibility: hidden;
+  }
+`;
 // используем дополнительный враппер,
 // потому что styled для ToastContainer не умеет работать с theme внутри
 // использовать бэм классы для стилизации пришлось,
@@ -45,7 +55,15 @@ export const Wrapper = styled.div `
   width: 432px;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    right: -20px;
+    inset: 0 0 auto;
+
+    width: 100%;
+    max-width: 100vw;
+    padding: ${({ theme }) => theme.spacing(2, 2, 2, 2)};
+    padding-top: max(
+      ${({ theme }) => theme.spacing(2)},
+      env(safe-area-inset-top, 0px)
+    );
   }
 
   &.${notifyClassnames.container} {
@@ -62,18 +80,86 @@ export const Wrapper = styled.div `
     }
     /* stylelint-enable plugin/no-unsupported-browser-features */
 
-    .Toastify:not(:last-child) {
-      overflow: hidden;
+    ${({ theme }) => theme.breakpoints.up('sm')} {
+      .${notifyClassnames.stackHost} .Toastify {
+        overflow: hidden;
+      }
+    }
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      justify-content: flex-start;
+
+      height: auto;
+
+      .${notifyClassnames.stackHost} .Toastify {
+        overflow: visible;
+      }
+
+      .${notifyClassnames.stack} {
+        overflow: hidden auto;
+        display: flex;
+        flex-direction: column;
+        gap: ${({ theme }) => theme.spacing(2)};
+        align-items: stretch;
+
+        width: 100%;
+        max-width: 100%;
+        padding-top: ${({ theme }) => theme.microSpacing(1)};
+        padding-bottom: 8px !important;
+        padding-bottom: ${({ theme }) => theme.spacing(1)};
+        -webkit-overflow-scrolling: touch;
+      }
+
+      .${notifyClassnames.stack} .${notifyClassnames.root} {
+        pointer-events: auto !important;
+
+        position: relative !important;
+        transform: none !important;
+
+        flex-shrink: 0;
+
+        width: 100% !important;
+        max-width: 100%;
+        height: auto !important;
+        min-height: ${NOTIFY_HEIGHT_MOBILE};
+        max-height: fit-content !important;
+        margin-top: 0 !important;
+        margin-right: 0 !important;
+        margin-bottom: 0 !important;
+
+        opacity: 1 !important;
+      }
+
+      /*
+        На мобильных контейнер не получает mouseEnter — toastify оставляет data-collapsed=true
+        и скрывает direct children не‑последних тостов (.Toastify__toast--stacked[data-collapsed=true]:not(:last-child)>*{opacity:0})
+      */
+      .${notifyClassnames.stack} .Toastify__toast--stacked > * {
+        opacity: 1 !important;
+      }
+
+      .${notifyClassnames.stack} .${notifyClassnames.root}__content {
+        max-height: 400px;
+        margin: ${({ theme }) => theme.spacing(2, 0, 0, 8)};
+      }
+
+      .${notifyClassnames.stack} .${notifyClassnames.root}__footer {
+        margin-bottom: 0;
+      }
+
+      .${notifyClassnames.stack} .Toastify__toast--stacked::before {
+        display: none;
+      }
     }
   }
 
   .${notifyClassnames.animationIn} {
-    animation: ${leaveIn} ease-in-out 0.34s;
+    animation: ${leaveIn} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
     animation-fill-mode: both;
   }
 
   .${notifyClassnames.animationOut} {
-    animation: ${leaveOut} ease-in-out 0.34s;
+    animation: ${leaveOut} ease-in-out;
     animation-fill-mode: both;
   }
 
@@ -82,7 +168,6 @@ export const Wrapper = styled.div `
 
     width: 400px;
     height: ${NOTIFY_HEIGHT};
-    min-height: ${NOTIFY_HEIGHT};
     padding: 0;
 
     box-shadow: ${({ theme }) => theme.elevation[300]};
@@ -104,6 +189,12 @@ export const Wrapper = styled.div `
       width: 100%;
       height: 3px;
     }
+    ${({ theme }) => theme.breakpoints.up('sm')} {
+      min-height: ${NOTIFY_HEIGHT};
+    }
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      min-height: ${NOTIFY_HEIGHT_MOBILE};
+    }
 
     .Toastify__progress-bar--wrp {
       top: 0;
@@ -151,8 +242,8 @@ export const Wrapper = styled.div `
   }
 
   /* Стили для уведомлений в стеке */
-  .Toastify:not(:last-child) {
-    .${notifyClassnames.root} {
+  ${({ theme }) => theme.breakpoints.up('sm')} { 
+    .${notifyClassnames.stack} .${notifyClassnames.root} {
       position: relative;
       transform: scale(var(--s));
 
@@ -185,6 +276,119 @@ export const Wrapper = styled.div `
       }
     }
   }
+
+  /* Мобильный стек в свёрнутом виде: последний в DOM (самый новый) — сверху; остальные без участия в раскладке */
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    &:not(.${notifyClassnames.container}) {
+      .${notifyClassnames.stack} {
+        position: relative;
+
+        overflow: visible;
+        display: flex;
+        flex-direction: column-reverse;
+        gap: 0;
+        align-items: stretch;
+        justify-content: flex-end;
+
+        max-height: none;
+        margin-bottom: ${({ theme }) => theme.spacing(2)};
+        -webkit-overflow-scrolling: auto;
+
+        /* Два фейковых слоя — только пока в стеке ≥2 активных тоста (без анимации закрытия) */
+
+        /* Причина игнора: Не критично для отображения */
+        /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+        &:has(.${notifyClassnames.root}:not(.${notifyClassnames.animationOut}) ~ .${notifyClassnames.root}:not(.${notifyClassnames.animationOut})) {
+          padding-top: ${({ theme }) => theme.spacing(4)};
+
+          &::before,
+          &::after {
+            pointer-events: none;
+            content: '';
+
+            position: absolute;
+            z-index: 0;
+            right: ${({ theme }) => theme.spacing(2)};
+            left: ${({ theme }) => theme.spacing(2)};
+
+            height: ${NOTIFY_HEIGHT_MOBILE};
+
+            background: ${({ theme }) => theme.palette.background.paper};
+            border-radius: ${({ theme }) => theme.shape.medium};
+            box-shadow: ${({ theme }) => theme.elevation[200]};
+          }
+
+          &::before {
+            top: 0;
+            transform: scaleX(0.92);
+          }
+
+          &::after {
+            top: ${({ theme }) => theme.spacing(2)};
+            transform: scaleX(0.96);
+          }
+        }
+      }
+
+      .${notifyClassnames.stack} .${notifyClassnames.root}:not(:last-of-type) {
+        pointer-events: none;
+
+        position: absolute;
+
+        overflow: hidden;
+
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+
+        white-space: nowrap;
+
+        opacity: 0;
+        clip: rect(0, 0, 0, 0);
+        clip-path: inset(50%);
+        border: 0;
+
+        .${notifyClassnames.root}__content {
+          max-height: 0 !important;
+          margin: 0 !important;
+        }
+      }
+
+      .${notifyClassnames.stack} .${notifyClassnames.root}:last-of-type {
+        position: relative;
+        z-index: 1;
+        transform: scale(var(--s, 1));
+
+        flex: 0 0 auto;
+        align-self: stretch;
+
+        width: 100% !important;
+        min-width: 0 !important;
+        max-width: 100% !important;
+        min-height: ${NOTIFY_HEIGHT_MOBILE};
+        margin-bottom: 0 !important;
+
+        opacity: 1;
+        border-radius: ${({ theme }) => theme.shape.medium};
+
+        .${notifyClassnames.root}__content {
+          max-height: 400px;
+          margin: ${({ theme }) => theme.spacing(2, 0, 0, 8)};
+        }
+      }
+
+      .${notifyClassnames.stackHost} .Toastify,
+      .${notifyClassnames.stackHost} .${notifyClassnames.stack} {
+        overflow: visible !important;
+      }
+
+      .${notifyClassnames.animationOut} {
+        animation: ${leaveOutMobileStacked} ease-in-out ${({ theme }) => theme.transitions.duration.standard}ms;
+        animation-fill-mode: both;
+      }
+    }
+  }
 `;
 export const Inner = styled(ToastContainer) `
   position: relative !important;
@@ -205,20 +409,53 @@ export const Inner = styled(ToastContainer) `
     }
   }
 
-  &:hover {
-    overflow: hidden auto;
+  /* Только устройства с реальным hover и ≥sm — иначе на touch :hover залипает и ломает мобильный стек */
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        overflow: hidden auto;
 
-    height: 100%;
+        height: 100%;
 
-    .${notifyClassnames.root} {
-      position: relative;
-      transform: unset;
+        .${notifyClassnames.root} {
+          position: relative;
+          transform: unset;
 
-      height: auto;
-      min-height: ${NOTIFY_HEIGHT};
-      margin-bottom: ${({ theme }) => theme.spacing(1)} !important;
+          height: auto;
+          min-height: ${NOTIFY_HEIGHT};
+          margin-bottom: ${({ theme }) => theme.spacing(1)} !important;
 
-      opacity: 1 !important;
+          opacity: 1 !important;
+        }
+
+        .${notifyClassnames.root}__content {
+          max-height: 400px;
+          margin: ${({ theme }) => theme.spacing(2, 0, 0, 8)};
+        }
+
+        .${notifyClassnames.root}__footer {
+          margin-bottom: 0;
+        }
+
+        .Toastify__toast--stacked::before {
+          display: none;
+        }
+      }
+    }
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    min-width: unset;
+    max-width: 100%;
+    padding-right: ${({ theme }) => theme.spacing(2)} !important;
+    padding-left: ${({ theme }) => theme.spacing(2)} !important;
+
+    .${notifyClassnames.root} {
+      width: 100% !important;
+      max-width: 100%;
+      height: auto !important;
+      min-height: ${NOTIFY_HEIGHT_MOBILE};
+      margin-bottom: ${({ theme }) => theme.spacing(2)} !important;
     }
 
     .${notifyClassnames.root}__content {
@@ -229,10 +466,6 @@ export const Inner = styled(ToastContainer) `
     .${notifyClassnames.root}__footer {
       margin-bottom: 0;
     }
-
-    .Toastify__toast--stacked::before {
-      display: none;
-    }
   }
 `;
 export const StaticInner = styled(Inner) `
@@ -259,4 +492,9 @@ export const CloseButton = styled(Button) `
   &.${notifyClassnames.closeButtonAnimationOut} {
     opacity: 0;
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: calc(100% - ${({ theme }) => theme.spacing(4)});
+    margin: ${({ theme }) => theme.spacing(0, 5, 2, 5)};
+  }
 `;

package/components/Notification/NotificationStackContainer/useLogic/hooks/index.d.ts

@@ -1 +1,2 @@
 export * from './useHover';
+export * from './useTouchStackExpand';

package/components/Notification/NotificationStackContainer/useLogic/hooks/index.js

@@ -1 +1,2 @@
 export * from './useHover';
+export * from './useTouchStackExpand';

package/components/Notification/NotificationStackContainer/useLogic/hooks/useHover/useHover.d.ts

@@ -1,3 +1,7 @@
-export declare const useHover: (element?: Element) => {
+type UseHoverParams = {
+    enabled?: boolean;
+};
+export declare const useHover: (element: Element | undefined, { enabled }?: UseHoverParams) => {
     isHovered: boolean;
 };
+export {};

package/components/Notification/NotificationStackContainer/useLogic/hooks/useHover/useHover.js

@@ -1,9 +1,13 @@
 import { useEffect, useState } from 'react';
-export const useHover = (element) => {
+export const useHover = (element, { enabled = true } = {}) => {
     const [isHovered, setHover] = useState(false);
     const handleMouseEnter = () => setHover(true);
     const handleMouseLeave = () => setHover(false);
     useEffect(() => {
+        if (!enabled) {
+            setHover(false);
+            return undefined;
+        }
         if (!element) {
             return undefined;
         }
@@ -13,6 +17,6 @@ export const useHover = (element) => {
             element.removeEventListener('mouseenter', handleMouseEnter);
             element.removeEventListener('mouseleave', handleMouseLeave);
         };
-    }, [element]);
+    }, [element, enabled]);
     return { isHovered };
 };

package/components/Notification/NotificationStackContainer/useLogic/hooks/useTouchStackExpand/index.d.ts

@@ -0,0 +1 @@
+export * from './useTouchStackExpand';

package/components/Notification/NotificationStackContainer/useLogic/hooks/useTouchStackExpand/index.js

@@ -0,0 +1 @@
+export * from './useTouchStackExpand';

package/components/Notification/NotificationStackContainer/useLogic/hooks/useTouchStackExpand/useTouchStackExpand.d.ts

@@ -0,0 +1,10 @@
+type UseTouchStackExpandParams = {
+    stackContainerElement: Element | null;
+    enabled: boolean;
+    hasOpenNotify: boolean;
+};
+/**
+ * Определяет, является ли стек уведомлений раскрытым на мобильном устройстве.
+ */
+export declare const useTouchStackExpand: ({ stackContainerElement, enabled, hasOpenNotify, }: UseTouchStackExpandParams) => boolean;
+export {};

package/components/Notification/NotificationStackContainer/useLogic/hooks/useTouchStackExpand/useTouchStackExpand.js

@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+import { notifyClassnames } from '../../../../constants';
+const isInteractiveTarget = (element) => Boolean(element.closest('button, a[href], [role="button"], input, textarea, select'));
+/**
+ * Определяет, является ли стек уведомлений раскрытым на мобильном устройстве.
+ */
+export const useTouchStackExpand = ({ stackContainerElement, enabled, hasOpenNotify, }) => {
+    const [isTouchExpanded, setTouchExpanded] = useState(false);
+    useEffect(() => {
+        if (!enabled || !hasOpenNotify) {
+            setTouchExpanded(false);
+        }
+    }, [enabled, hasOpenNotify]);
+    useEffect(() => {
+        if (!enabled || !hasOpenNotify || !stackContainerElement) {
+            return undefined;
+        }
+        const toggleStack = (event) => {
+            const { target } = event;
+            if (!(target instanceof Element) || isInteractiveTarget(target)) {
+                return;
+            }
+            setTouchExpanded((prev) => !prev);
+        };
+        stackContainerElement.addEventListener('pointerdown', toggleStack);
+        return () => {
+            stackContainerElement.removeEventListener('pointerdown', toggleStack);
+        };
+    }, [enabled, hasOpenNotify, stackContainerElement]);
+    useEffect(() => {
+        const collapseIfOutside = (event) => {
+            const { target } = event;
+            if (!(target instanceof Node) || !stackContainerElement) {
+                return;
+            }
+            const stackHost = stackContainerElement.closest(`.${notifyClassnames.stackHost}`);
+            const insideUi = stackHost?.parentElement ?? stackContainerElement;
+            if (!insideUi.contains(target)) {
+                setTouchExpanded(false);
+            }
+        };
+        document.addEventListener('pointerdown', collapseIfOutside, true);
+        if (!enabled ||
+            !hasOpenNotify ||
+            !isTouchExpanded ||
+            !stackContainerElement) {
+            document.removeEventListener('pointerdown', collapseIfOutside, true);
+        }
+        return () => {
+            document.removeEventListener('pointerdown', collapseIfOutside, true);
+        };
+    }, [enabled, hasOpenNotify, isTouchExpanded, stackContainerElement]);
+    return isTouchExpanded;
+};

package/components/Notification/NotificationStackContainer/useLogic/useLogic.d.ts

@@ -4,7 +4,7 @@ type UseLogicParams = {
 };
 export declare const useLogic: ({ containerId: externalContainerId, }: UseLogicParams) => {
     isVisibleCloseButton: boolean;
-    isHoveredContainer: boolean;
+    isStackExpanded: boolean;
     isStartedClosingNotify: boolean;
     closeAll: () => void;
 };

package/components/Notification/NotificationStackContainer/useLogic/useLogic.js

@@ -1,9 +1,11 @@
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify-next';
+import { useViewportType } from '../../../useViewportType';
 import { NOTIFY_NO_TRANSITION_ATTR, notifyClassnames } from '../../constants';
 import { sleep } from '../../utils/sleep';
-import { useHover } from './hooks';
+import { useHover, useTouchStackExpand } from './hooks';
 export const useLogic = ({ containerId: externalContainerId, }) => {
+    const { isMobile } = useViewportType();
     const [toasts, setToasts] = useState([]);
     const [container, setContainer] = useState();
     const [isStartedClosingNotify, setStartedClosingNotify] = useState(false);
@@ -29,7 +31,16 @@ export const useLogic = ({ containerId: externalContainerId, }) => {
             setStartedClosingNotify(false);
         }
     }, [toasts]);
-    const { isHovered: isHoveredContainer } = useHover(container);
+    const hasOpenNotify = Boolean(toasts.length);
+    const { isHovered } = useHover(container, {
+        enabled: !isMobile,
+    });
+    const isTouchExpanded = useTouchStackExpand({
+        stackContainerElement: container ?? null,
+        enabled: isMobile,
+        hasOpenNotify,
+    });
+    const isStackExpanded = isMobile ? isTouchExpanded : isHovered;
     const handleAddToast = ({ id, containerId }) => {
         if (Object.is(containerId, externalContainerId)) {
             setToasts((currentToasts) => [...currentToasts, id]);
@@ -58,29 +69,28 @@ export const useLogic = ({ containerId: externalContainerId, }) => {
         return unsubscribe;
     }, []);
     useEffect(() => {
-        if (!isHoveredContainer || !container) {
+        if (!isStackExpanded || !container) {
             return;
         }
         (async () => {
             // Ожидаем пока отработает анимация и стек с уведомлениями раскроется
             await sleep(300);
-            const hasScroll = container?.scrollHeight > container?.clientHeight;
-            if (hasScroll) {
+            const hasVerticalScroll = container.scrollHeight > container.clientHeight;
+            if (hasVerticalScroll) {
                 container.scrollTo({
                     top: container.scrollHeight,
                     behavior: 'smooth',
                 });
             }
         })();
-    }, [container, isHoveredContainer]);
+    }, [container, isStackExpanded]);
     const closeAll = () => {
         setStartedClosingNotify(true);
         toast.dismiss({ containerId: externalContainerId });
     };
-    const hasOpenNotify = Boolean(toasts.length);
     return {
-        isVisibleCloseButton: hasOpenNotify,
-        isHoveredContainer: isHoveredContainer && hasOpenNotify,
+        isVisibleCloseButton: hasOpenNotify && (isMobile ? isStackExpanded : true),
+        isStackExpanded,
         isStartedClosingNotify,
         closeAll,
     };

package/components/Notification/NotificationTemplate/styles.js

@@ -1,4 +1,6 @@
+import { buttonClassnames } from '../../Button/constants';
 import { IconButton } from '../../IconButton';
+import { svgIconClassnames } from '../../SvgIcon/constants';
 import { styled } from '../../styled';
 import { Typography } from '../../Typography';
 import { getActionsDirection } from './utils';
@@ -15,6 +17,10 @@ export const Wrapper = styled.article `
   color: ${({ theme }) => theme.palette.grey[900]};
 
   background: ${({ theme }) => theme.palette.background.default};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(2, 3)};
+  }
 `;
 export const Header = styled.header `
   display: flex;
@@ -22,6 +28,13 @@ export const Header = styled.header `
 
   width: 100%;
   min-height: 24px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    .${buttonClassnames.root} {
+      width: 24px;
+      height: 24px;
+    }
+  }
 `;
 export const Content = styled(Typography) `
   margin-top: ${({ theme }) => theme.spacing(2)};
@@ -38,6 +51,13 @@ export const IconWrapper = styled.div `
   display: flex;
 
   margin-right: ${({ theme }) => theme.spacing(2)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    .${svgIconClassnames.root} {
+      width: 24px;
+      height: 24px;
+    }
+  }
 `;
 export const CloseButton = styled(IconButton) `
   align-self: center;