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 && (
+        <Portal>
+          <div
             {...props}
             ref={setPopoverDropdownRef}
-        onMouseEnter={async () => { setOverDropDown(true); hover && await openDropdownPopover() }}
-        onMouseLeave={() => { setOverDropDown(false); (!overButton && hover) && closeDropdownPopover() }}
-        style={styles.popper}
+            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 z-50 float-left rounded-xl overflow-hidden text-left shadow-lg`,
+              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>}
+          </div>
+        </Portal>
+      )}
 
     </>
   );