fix: Fix UI issues on embed popup footer (#10286)

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

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

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(