drdopdown is now isoalted protal

Parts/DropDown.tsx

@@ -1,6 +1,7 @@
 import React, { cloneElement, isValidElement, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { createPopper, Placement } from "@popperjs/core";
 import { usePopper } from 'react-popper';
+import { Portal } from "@mantine/core";
 
 import styled from "styled-components";
 import tw from "twin.macro"
@@ -118,22 +119,26 @@ let Dropdown = React.forwardRef(({ children, dropdownCss = null, onValueChanged
         {button}
       </button>
 
-      {dropdownPopoverShow && <div
+      {dropdownPopoverShow && (
-        {...props}
+        <Portal>
-        ref={setPopoverDropdownRef}
+          <div
-        onMouseEnter={async () => { setOverDropDown(true); hover && await openDropdownPopover() }}
+            {...props}
-        onMouseLeave={() => { setOverDropDown(false); (!overButton && hover) && closeDropdownPopover() }}
+            ref={setPopoverDropdownRef}
-        style={styles.popper}
+            onMouseEnter={async () => { setOverDropDown(true); hover && await openDropdownPopover(); }}
-        {...attributes.popper}
+            onMouseLeave={() => { setOverDropDown(false); (!overButton && hover) && closeDropdownPopover(); }}
-        css={[
+            style={{ ...styles.popper, zIndex: 99999 }}
-          dropdownPopoverShow ? tw`block` : tw`hidden`,
+            {...attributes.popper}
-          tw`bg-trinary text-base z-50 float-left rounded-xl overflow-hidden text-left shadow-lg`,
+            css={[
-          dropdownCss,
+              dropdownPopoverShow ? tw`block` : tw`hidden`,
-          (props as any).css
+              tw`bg-trinary text-base float-left rounded-xl overflow-hidden text-left shadow-2xl border border-secondary`,
-        ]}
+              dropdownCss,
-      >
+              (props as any).css
-        {childrenWithProps}
+            ]}
-      </div>}
+          >
+            {childrenWithProps}
+          </div>
+        </Portal>
+      )}
 
     </>
   );