From 00cab5c41ff0a1c92c04d0321210f3fe9595fd41 Mon Sep 17 00:00:00 2001
From: Nafees Nazik <84864519+G3root@users.noreply.github.com>
Date: Fri, 20 Jan 2023 18:59:37 +0530
Subject: [PATCH] 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           | 2 +-
 .../features/ee/teams/components/MemberChangeRoleModal.tsx  | 2 +-
 packages/ui/components/dialog/Dialog.tsx                    | 6 ++++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/dialog/EditLocationDialog.tsx b/apps/web/components/dialog/EditLocationDialog.tsx
index df7906127d..87e946c801 100644
--- a/apps/web/components/dialog/EditLocationDialog.tsx
+++ b/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" />
diff --git a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
index 070512d825..d3fa78013a 100644
--- a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
+++ b/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">
diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index d1fe17c6bd..73cf22e667 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/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}>