From e6056bc4a4db8abdf9c52441e75d905a4fff5edd Mon Sep 17 00:00:00 2001
From: xylon <xylonx@xylonx.com>
Date: Tue, 16 Apr 2024 12:48:10 +0200
Subject: [PATCH] fix: change max width to avoid overflow in dialog when
 creating new event type (#14198)

* fix: change max width to avoid overflow when creating new event dialog

* style: make max with responsive at md breakpoint

* chore: add tooltip

---------

Co-authored-by: xylonx <x956200361@gmail.com>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Udit Takkar <udit222001@gmail.com>
---
 .../components/CreateEventTypeDialog.tsx       | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/features/eventtypes/components/CreateEventTypeDialog.tsx b/packages/features/eventtypes/components/CreateEventTypeDialog.tsx
index b5b21fb244..7459abe41e 100644
--- a/packages/features/eventtypes/components/CreateEventTypeDialog.tsx
+++ b/packages/features/eventtypes/components/CreateEventTypeDialog.tsx
@@ -29,6 +29,7 @@ import {
   RadioGroup as RadioArea,
   showToast,
   TextField,
+  Tooltip,
 } from "@calcom/ui";
 
 // this describes the uniform data needed to create a new event type on Profile or Team
@@ -197,7 +198,13 @@ export default function CreateEventTypeDialog({
                 <TextField
                   label={`${t("url")}: ${urlPrefix}`}
                   required
-                  addOnLeading={<>/{!isManagedEventType ? pageSlug : t("username_placeholder")}/</>}
+                  addOnLeading={
+                    <Tooltip content={!isManagedEventType ? pageSlug : t("username_placeholder")}>
+                      <span className="max-w-24 md:max-w-56">
+                        /{!isManagedEventType ? pageSlug : t("username_placeholder")}/
+                      </span>
+                    </Tooltip>
+                  }
                   {...register("slug")}
                   onChange={(e) => {
                     form.setValue("slug", slugify(e?.target.value), { shouldTouch: true });
@@ -214,9 +221,12 @@ export default function CreateEventTypeDialog({
                   label={t("url")}
                   required
                   addOnLeading={
-                    <>
-                      {urlPrefix}/{!isManagedEventType ? pageSlug : t("username_placeholder")}/
-                    </>
+                    <Tooltip
+                      content={`${urlPrefix}/{!isManagedEventType ? pageSlug : t("username_placeholder")}/`}>
+                      <span className="max-w-24 md:max-w-56">
+                        {urlPrefix}/{!isManagedEventType ? pageSlug : t("username_placeholder")}/
+                      </span>
+                    </Tooltip>
                   }
                   {...register("slug")}
                 />