fix(dialog-portal): set z-index to high value (#13004)

react/features/toolbox/components/web/DialogPortal.ts

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { useSelector } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
+import { ZINDEX_DIALOG_PORTAL } from '../../constants';
 
 type Props = {
 
@@ -65,6 +66,7 @@ function DialogPortal({ children, className, style, getRef, setSize }: Props) {
     useEffect(() => {
         if (portalTarget && getRef) {
             getRef(portalTarget);
+            portalTarget.style.zIndex = `${ZINDEX_DIALOG_PORTAL}`;
         }
     }, [ portalTarget ]);
 

react/features/toolbox/constants.ts

@@ -38,3 +38,6 @@ export const NOTIFY_CLICK_MODE = {
     ONLY_NOTIFY: 'ONLY_NOTIFY',
     PREVENT_AND_NOTIFY: 'PREVENT_AND_NOTIFY'
 };
+
+// Around 300 to be displayed above components like chat
+export const ZINDEX_DIALOG_PORTAL = 300;