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
-        {...props}
-        ref={setPopoverDropdownRef}
-        onMouseEnter={async () => { setOverDropDown(true); hover && await openDropdownPopover() }}
-        onMouseLeave={() => { setOverDropDown(false); (!overButton && hover) && closeDropdownPopover() }}
-        style={styles.popper}
-        {...attributes.popper}
-        css={[
-          dropdownPopoverShow ? tw`block` : tw`hidden`,
-          tw`bg-trinary text-base z-50 float-left rounded-xl overflow-hidden text-left shadow-lg`,
-          dropdownCss,
-          (props as any).css
-        ]}
-      >
-        {childrenWithProps}
-      </div>}
+      {dropdownPopoverShow && (
+        <Portal>
+          <div
+            {...props}
+            ref={setPopoverDropdownRef}
+            onMouseEnter={async () => { setOverDropDown(true); hover && await openDropdownPopover(); }}
+            onMouseLeave={() => { setOverDropDown(false); (!overButton && hover) && closeDropdownPopover(); }}
+            style={{ ...styles.popper, zIndex: 99999 }}
+            {...attributes.popper}
+            css={[
+              dropdownPopoverShow ? tw`block` : tw`hidden`,
+              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>
+        </Portal>
+      )}
 
     </>
   );