fix: react-select overflow issue in some modals. (#6587)

* feat: add a disable overflow prop

* feat: use the disable overflow prop

apps/web/components/dialog/EditLocationDialog.tsx

@@ -212,7 +212,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
 
   return (
     <Dialog open={isOpenDialog}>
-      <DialogContent>
+      <DialogContent disableOverflow>
         <div className="flex flex-row space-x-3">
           <div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
             <Icon.FiMapPin className="text-primary-600 h-6 w-6" />

packages/features/ee/teams/components/MemberChangeRoleModal.tsx

@@ -67,7 +67,7 @@ export default function MemberChangeRoleModal(props: {
   }
   return (
     <Dialog open={props.isOpen} onOpenChange={props.onExit}>
-      <DialogContent type="creation">
+      <DialogContent disableOverflow type="creation">
         <>
           <div className="mb-4 sm:flex sm:items-start">
             <div className="text-center sm:text-left">

packages/ui/components/dialog/Dialog.tsx

@@ -68,10 +68,11 @@ type DialogContentProps = React.ComponentProps<typeof DialogPrimitive["Content"]
   closeText?: string;
   actionDisabled?: boolean;
   Icon?: SVGComponent;
+  disableOverflow?: boolean;
 };
 
 export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ children, title, Icon, type = "creation", ...props }, forwardedRef) => {
+  ({ children, title, Icon, disableOverflow, type = "creation", ...props }, forwardedRef) => {
     return (
       <DialogPrimitive.Portal>
         <DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-40 bg-gray-500 bg-opacity-75 transition-opacity" />
@@ -87,7 +88,8 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
               : props.size == "md"
               ? "p-8 sm:max-w-[48rem]"
               : "p-8 sm:max-w-[35rem]",
-            "max-h-[95vh] overflow-auto",
+            "max-h-[95vh]",
+            disableOverflow ? "overflow-visible" : "overflow-auto",
             `${props.className || ""}`
           )}
           ref={forwardedRef}>