From 2b5577772b8541ae767a137468988d81a1f5db68 Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Mon, 24 Jul 2023 07:17:25 +0100
Subject: [PATCH] fix: Fix UI issues on embed popup footer (#10286)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
---
 apps/web/components/Embed.tsx            |  7 ++-----
 packages/ui/components/dialog/Dialog.tsx | 12 ++----------
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/apps/web/components/Embed.tsx b/apps/web/components/Embed.tsx
index 6a0923ab1f..d194306793 100644
--- a/apps/web/components/Embed.tsx
+++ b/apps/web/components/Embed.tsx
@@ -1181,7 +1181,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
             </div>
           </div>
         </div>
-        <div className="flex w-2/3 flex-col p-8">
+        <div className="flex w-2/3 flex-col px-8 pt-8">
           <HorizontalTabs data-testid="embed-tabs" tabs={parsedTabs} linkShallow />
           {tabs.map((tab) => {
             return (
@@ -1208,10 +1208,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                   )}
                 </div>
                 <div className={router.query.embedTabName == "embed-preview" ? "mt-2 block" : "hidden"} />
-                <DialogFooter
-                  className="mt-10 flex flex-row-reverse gap-x-2"
-                  showDivider
-                  customDividerClassNames="w-2/3">
+                <DialogFooter className="mt-10 flex-row-reverse gap-x-2" showDivider>
                   <DialogClose />
                   {tab.type === "code" ? (
                     <Button
diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index e40ace97f3..57fbe23984 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -141,20 +141,12 @@ export function DialogHeader(props: DialogHeaderProps) {
   );
 }
 
-export function DialogFooter(props: {
-  children: ReactNode;
-  className?: string;
-  showDivider?: boolean;
-  customDividerClassNames?: string;
-}) {
+export function DialogFooter(props: { children: ReactNode; className?: string; showDivider?: boolean }) {
   return (
     <div className={classNames("bg-default sticky bottom-0", props.className)}>
       {props.showDivider && (
         // TODO: the -mx-8 is causing overflow in the dialog buttons
-        <hr
-          data-testid="divider"
-          className={classNames("border-subtle -mx-8", props.customDividerClassNames)}
-        />
+        <hr data-testid="divider" className="border-subtle -mx-8" />
       )}
       <div
         className={classNames(