Merge branch 'fix-z-index' into 'develop'

Resolve bug with toast during modal

See merge request soapbox-pub/soapbox!2436

app/soapbox/components/modal-root.tsx

@@ -181,7 +181,9 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
   };
 
   const getSiblings = () => {
-    return Array(...(ref.current!.parentElement!.childNodes as any as ChildNode[])).filter(node => node !== ref.current);
+    return Array(...(ref.current!.parentElement!.childNodes as any as ChildNode[]))
+      .filter(node => (node as HTMLDivElement).id !== 'toaster')
+      .filter(node => node !== ref.current);
   };
 
   useEffect(() => {

app/soapbox/containers/soapbox.tsx

@@ -191,7 +191,14 @@ const SoapboxMount = () => {
                 </BundleContainer>
 
                 <GdprBanner />
-                <Toaster position='top-right' containerClassName='top-10' containerStyle={{ top: 75 }} />
+
+                <div id='toaster'>
+                  <Toaster
+                    position='top-right'
+                    containerClassName='top-10'
+                    containerStyle={{ top: 75 }}
+                  />
+                </div>
               </Route>
             </Switch>
           </ScrollContext>