Embed width increase to allow preview to work in desktop mode (#4547)

apps/web/components/Embed.tsx

@@ -5,10 +5,10 @@ import { createRef, forwardRef, MutableRefObject, RefObject, useRef, useState }
 import { components, ControlProps } from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
 import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields";
 import { Button, HorizontalTabs, showToast, Switch } from "@calcom/ui/v2";
+import { Dialog, DialogClose, DialogContent } from "@calcom/ui/v2/core/Dialog";
 
 import { EMBED_LIB_URL, WEBAPP_URL } from "@lib/config/constants";
 
@@ -560,7 +560,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
   {
     name: "Preview",
     href: "embedTabName=embed-preview",
-    icon: Icon.FiEye,
+    icon: Icon.FiTrello,
     type: "iframe",
     Component: forwardRef<
       HTMLIFrameElement | HTMLTextAreaElement | null,
@@ -606,7 +606,7 @@ const ChooseEmbedTypesDialogContent = () => {
   const { t } = useLocale();
   const router = useRouter();
   return (
-    <DialogContent size="lg">
+    <DialogContent type="creation" useOwnActionButtons size="lg">
       <div className="mb-4">
         <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
           {t("how_you_want_add_cal_site")}
@@ -784,9 +784,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   ];
 
   return (
-    <DialogContent size="lg">
+    <DialogContent size="xl" className="p-0.5" type="creation" useOwnActionButtons>
       <div className="flex">
-        <div className="flex w-1/3 flex-col bg-white p-6">
+        <div className="flex w-1/3 flex-col bg-gray-50 p-8">
           <h3 className="mb-2 flex text-xl font-bold leading-6 text-gray-900" id="modal-title">
             <button
               onClick={() => {
@@ -1038,7 +1038,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
             </Collapsible>
           </div>
         </div>
-        <div className="flex w-2/3 flex-col p-6">
+        <div className="flex w-2/3 flex-col p-8">
           <HorizontalTabs data-testid="embed-tabs" tabs={parsedTabs} linkProps={{ shallow: true }} />
           {tabs.map((tab) => {
             return (

packages/ui/v2/core/Dialog.tsx

@@ -35,7 +35,7 @@ export function Dialog(props: DialogProps) {
         {
           // This is temporary till we are doing rewrites to /v2.
           // If not done, opening/closing a modalbox can take the user to /v2 paths.
-          pathname: router.asPath.replace("/v2", ""),
+          pathname: router.pathname.replace("/v2", ""),
           query: {
             ...router.query,
           },
@@ -88,7 +88,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
         className={classNames(
           "fadeIn fixed left-1/2 top-1/2 z-[9998] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white text-left shadow-xl focus-visible:outline-none sm:w-full sm:align-middle",
           props.size == "xl"
-            ? "p-0.5 sm:max-w-[98vw]"
+            ? "p-8 sm:max-w-[90rem]"
             : props.size == "lg"
             ? "p-8 sm:max-w-[70rem]"
             : props.size == "md"

packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx

@@ -4,6 +4,7 @@ import { ComponentProps } from "react";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { SVGComponent } from "@calcom/types/SVGComponent";
 
 import { SkeletonText } from "../../skeleton";
 
@@ -13,6 +14,7 @@ export type HorizontalTabItemProps = {
   className?: string;
   href: string;
   linkProps?: Omit<ComponentProps<typeof Link>, "href">;
+  icon?: SVGComponent;
 };
 
 const HorizontalTabItem = function ({ name, href, linkProps, ...props }: HorizontalTabItemProps) {
@@ -30,6 +32,17 @@ const HorizontalTabItem = function ({ name, href, linkProps, ...props }: Horizon
           props.className
         )}
         aria-current={isCurrent ? "page" : undefined}>
+        {props.icon && (
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          //@ts-ignore
+          <props.icon
+            className={classNames(
+              isCurrent ? "text-neutral-900" : "text-gray-400 group-hover:text-gray-500",
+              "-ml-0.5 hidden h-4 w-4 ltr:mr-2 rtl:ml-2 sm:inline-block"
+            )}
+            aria-hidden="true"
+          />
+        )}
         {isLocaleReady ? t(name) : <SkeletonText className="h-4 w-24" />}
       </a>
     </Link>