Profile: Fix missing toast notifications on mobile (#1089)

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}
         />
       )
     );

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}

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;