fix: Dialogue - Portal stacking for NestedMenu

- render Dialogue through Portal instead of document.body
- lower overlay and dialog z-index from 50 to 10
- let NestedMenu and Popup (z-index 11) appear above Dialogue

Author: apostololeg

src/components/Dialogue/Dialogue.styl

@@ -3,7 +3,7 @@
 .dialogOverlay
   position fixed
   inset 0
-  z-index 50
+  z-index 10
   background-color var(--decent-color-alpha-900)
   backdrop-filter blur(4px)
   opacity 0
@@ -20,7 +20,7 @@
   position fixed
   left 50%
   top 50%
-  z-index 50
+  z-index 10
   display flex
   flex-direction column
   width fit-content

src/components/Dialogue/Dialogue.tsx

@@ -1,6 +1,5 @@
 import cn from 'classnames';
 import { useEffect, useId, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 
 import {
   Card,
@@ -9,6 +8,7 @@ import {
   CardHeader,
 } from 'uilib/components/Card/Card';
 import { Icon } from 'uilib/components/Icon/Icon';
+import { Portal } from 'uilib/components/Portal/Portal';
 import { isBrowser } from 'uilib/tools/env';
 
 import S from './Dialogue.styl';
@@ -207,11 +207,9 @@ export function Dialogue({
   return (
     <>
       {trigger && <div onClick={onTriggerClick}>{trigger}</div>}
-      {open &&
-        !disabled &&
-        isMounted &&
-        isBrowser &&
-        createPortal(dialogueContent, document.body)}
+      {open && !disabled && isMounted && isBrowser && (
+        <Portal>{dialogueContent}</Portal>
+      )}
     </>
   );
 }