From 47add7e7fc371e4e6aaeafde04f68224458da20a Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Tue, 18 Jul 2023 14:23:01 +0530
Subject: [PATCH] fix: modals regression (#10211)

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
---
 packages/features/form-builder/FormBuilder.tsx       |  5 +++--
 .../components/dialog/ConfirmationDialogContent.tsx  |  2 +-
 packages/ui/components/dialog/Dialog.tsx             | 12 ++++++------
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx
index dd25814ace..8dc9fe2df2 100644
--- a/packages/features/form-builder/FormBuilder.tsx
+++ b/packages/features/form-builder/FormBuilder.tsx
@@ -301,7 +301,8 @@ export const FormBuilder = function FormBuilder({
             const isFieldEditableSystemButOptional = field.editable === "system-but-optional";
             const isFieldEditableSystemButHidden = field.editable === "system-but-hidden";
             const isFieldEditableSystem = field.editable === "system";
-            const isUserField = !isFieldEditableSystem && !isFieldEditableSystemButOptional && !isFieldEditableSystemButHidden;
+            const isUserField =
+              !isFieldEditableSystem && !isFieldEditableSystemButOptional && !isFieldEditableSystemButHidden;
 
             if (!fieldType) {
               throw new Error(`Invalid field type - ${field.type}`);
@@ -543,7 +544,7 @@ export const FormBuilder = function FormBuilder({
               />
             </Form>
           </div>
-          <DialogFooter className="relative mt-5 rounded px-8 pb-8" showDivider>
+          <DialogFooter className="relative rounded px-8" showDivider>
             <DialogClose color="secondary">{t("cancel")}</DialogClose>
             <Button data-testid="field-add-save" type="submit" form="form-builder">
               {isFieldEditMode ? t("save") : t("add")}
diff --git a/packages/ui/components/dialog/ConfirmationDialogContent.tsx b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
index 8c1ce9c5d3..a9dabddd63 100644
--- a/packages/ui/components/dialog/ConfirmationDialogContent.tsx
+++ b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
@@ -65,7 +65,7 @@ export function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationD
           </DialogPrimitive.Description>
         </div>
       </div>
-      <div className="mt-5 flex flex-row-reverse gap-x-2 sm:mt-8">
+      <div className="my-5 flex flex-row-reverse gap-x-2 sm:my-8">
         {confirmBtn ? (
           confirmBtn
         ) : (
diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index dddb55fa80..f481fa98c3 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -77,14 +77,14 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
         <DialogPrimitive.Content
           {...props}
           className={classNames(
-            "fadeIn bg-default scroll-bar fixed left-1/2 top-1/2 z-50 w-full max-w-[22rem] -translate-x-1/2 -translate-y-1/2 rounded-md px-8 pb-0 pt-8 text-left shadow-xl focus-visible:outline-none sm:align-middle",
+            "fadeIn bg-default scroll-bar fixed left-1/2 top-1/2 z-50 w-full max-w-[22rem] -translate-x-1/2 -translate-y-1/2 rounded-md text-left shadow-xl focus-visible:outline-none sm:align-middle",
             props.size == "xl"
-              ? "sm:max-w-[90rem]"
+              ? "px-8 pt-8 sm:max-w-[90rem]"
               : props.size == "lg"
-              ? "sm:max-w-[70rem]"
+              ? "px-8 pt-8 sm:max-w-[70rem]"
               : props.size == "md"
-              ? "sm:max-w-[48rem]"
-              : "sm:max-w-[35rem]",
+              ? "px-8 pt-8 sm:max-w-[48rem]"
+              : "px-8 pt-8 sm:max-w-[35rem]",
             "max-h-[95vh]",
             enableOverflow ? "overflow-auto" : "overflow-visible",
             `${props.className || ""}`
@@ -148,7 +148,7 @@ export function DialogFooter(props: {
       <div
         className={classNames(
           "flex justify-end space-x-2 pb-4 pt-4 rtl:space-x-reverse",
-          props.showDivider && "-mb-4"
+          !props.showDivider && "pb-8"
         )}>
         {props.children}
       </div>