From bf19ec22d0b7fddcbf890df2c688d99c158d9b94 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Thu, 13 May 2021 12:00:28 +0300
Subject: [PATCH] Profile: Fix missing toast notifications on mobile (#1089)

---
 src/components/middle/message/Poll.tsx | 2 ++
 src/components/ui/Notification.tsx     | 7 +++++--
 src/styles/_variables.scss             | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/middle/message/Poll.tsx b/src/components/middle/message/Poll.tsx
index 5a0e34eb1..232cfbeb8 100644
--- a/src/components/middle/message/Poll.tsx
+++ b/src/components/middle/message/Poll.tsx
@@ -42,6 +42,7 @@ type StateProps = {
 
 type DispatchProps = Pick<GlobalActions, ('loadMessage' | 'openPollResults')>;
 
+const SOLUTION_CONTAINER_ID = '#middle-column-portals';
 const SOLUTION_DURATION = 5000;
 const NBSP = '\u00A0';
 
@@ -248,6 +249,7 @@ const Poll: FC<OwnProps & StateProps & DispatchProps> = ({
           message={renderTextWithEntities(poll.results.solution, poll.results.solutionEntities)}
           duration={SOLUTION_DURATION}
           onDismiss={handleSolutionHide}
+          containerId={SOLUTION_CONTAINER_ID}
         />
       )
     );
diff --git a/src/components/ui/Notification.tsx b/src/components/ui/Notification.tsx
index 9c56c3e36..dcf6e8cc1 100644
--- a/src/components/ui/Notification.tsx
+++ b/src/components/ui/Notification.tsx
@@ -18,6 +18,7 @@ import Portal from './Portal';
 import './Notification.scss';
 
 type OwnProps = {
+  containerId?: string;
   message: TextPart[];
   duration?: number;
   onDismiss: () => void;
@@ -26,7 +27,9 @@ type OwnProps = {
 const DEFAULT_DURATION = 3000;
 const ANIMATION_DURATION = 150;
 
-const Notification: FC<OwnProps> = ({ message, duration = DEFAULT_DURATION, onDismiss }) => {
+const Notification: FC<OwnProps> = ({
+  message, duration = DEFAULT_DURATION, containerId, onDismiss,
+}) => {
   const [isOpen, setIsOpen] = useState(true);
   // eslint-disable-next-line no-null/no-null
   const timerRef = useRef<number | undefined>(null);
@@ -63,7 +66,7 @@ const Notification: FC<OwnProps> = ({ message, duration = DEFAULT_DURATION, onDi
   }, [duration, closeAndDismiss]);
 
   return (
-    <Portal className="Notification-container" containerId="#middle-column-portals">
+    <Portal className="Notification-container" containerId={containerId}>
       <div
         className={buildClassName('Notification', transitionClassNames)}
         onClick={closeAndDismiss}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 309e9451b..e0bdd1996 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -164,13 +164,13 @@ $color-user-8: #faa774;
   }
 
   --z-ui-loader-mask: 2000;
+  --z-notification: 1000;
   --z-right-column: 900;
   --z-header-menu: 990;
   --z-header-menu-backdrop: 980;
   --z-modal: 1000;
   --z-media-viewer: 1500;
   --z-drop-area: 55;
-  --z-notification: 50;
   --z-animation-fade: 50;
   --z-menu-bubble: 21;
   --z-menu-backdrop: 20;