fix: Wrong padding on modals - second version (CALCOM-8414) (#9419)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>

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

@@ -131,7 +131,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
         </div>
 
         <Form form={newMemberFormMethods} handleSubmit={(values) => props.onSubmit(values)}>
-          <div className="my-6 space-y-6">
+          <div className="mt-6 mb-10 space-y-6">
             {/* Indivdual Invite */}
             {modalImportMode === "INDIVIDUAL" && (
               <Controller

packages/features/eventtypes/components/CreateEventTypeDialog.tsx

@@ -29,6 +29,7 @@ import {
   showToast,
   TextField,
   Editor,
+  DialogFooter,
 } from "@calcom/ui";
 
 // this describes the uniform data needed to create a new event type on Profile or Team
@@ -159,7 +160,7 @@ export default function CreateEventTypeDialog({
           handleSubmit={(values) => {
             createMutation.mutate(values);
           }}>
-          <div className="mt-3 space-y-6">
+          <div className="mt-3 space-y-6 pb-10">
             {teamId && (
               <TextField
                 type="hidden"
@@ -293,12 +294,12 @@ export default function CreateEventTypeDialog({
               </div>
             )}
           </div>
-          <div className="mt-10 flex justify-end gap-x-2">
+          <DialogFooter showDivider>
             <DialogClose />
             <Button type="submit" loading={createMutation.isLoading}>
               {t("continue")}
             </Button>
-          </div>
+          </DialogFooter>
         </Form>
       </DialogContent>
     </Dialog>

packages/features/form-builder/FormBuilder.tsx

@@ -545,7 +545,7 @@ export const FormBuilder = function FormBuilder({
               />
             </Form>
           </div>
-          <DialogFooter className="relative rounded px-8 pb-4" showDivider>
+          <DialogFooter className="relative rounded px-8 pb-8" showDivider>
             <DialogClose color="secondary">{t("cancel")}</DialogClose>
             <Button data-testid="field-add-save" type="submit" form="form-builder">
               {isFieldEditMode ? t("save") : t("add")}

packages/ui/components/dialog/Dialog.tsx

@@ -138,7 +138,11 @@ export function DialogFooter(props: { children: ReactNode; className?: string; s
   return (
     <div className={classNames("bg-default", props.className)}>
       {props.showDivider && <hr className="border-subtle absolute right-0 w-full" />}
-      <div className={classNames("-mb-4 flex justify-end space-x-2 pt-4 rtl:space-x-reverse")}>
+      <div
+        className={classNames(
+          "flex justify-end space-x-2 pt-4 rtl:space-x-reverse",
+          props.showDivider && "-mb-4"
+        )}>
         {props.children}
       </div>
     </div>