From db9b9c45dc538de242ff7051f5bd46898b5c032e Mon Sep 17 00:00:00 2001
From: ddoemonn <109994179+ddoemonn@users.noreply.github.com>
Date: Tue, 5 Aug 2025 06:51:30 +0300
Subject: [PATCH] fix(event-types): remove gap in URL input for event creation
 (#22123)

* fix(event-types): remove gap in URL input for event creation

* fix: event setup tab spacing

* fix: space in profile view

---------

Co-authored-by: Kartik Saini <41051387+kart1ka@users.noreply.github.com>
---
 .../ui/UsernameAvailability/UsernameTextfield.tsx         | 3 ++-
 .../eventtypes/components/CreateEventTypeForm.tsx         | 8 ++++++--
 .../eventtypes/components/tabs/setup/EventSetupTab.tsx    | 7 +++++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
index 921c1c0114..68b589b992 100644
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@@ -124,8 +124,9 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
             autoComplete="none"
             autoCapitalize="none"
             autoCorrect="none"
+            containerClassName="[&>div]:gap-0"
             className={classNames(
-              "mb-0 mt-0 rounded-md rounded-l-none",
+              "mb-0 mt-0 rounded-md rounded-l-none pl-0",
               markAsError
                 ? "focus:shadow-0 focus:ring-shadow-0 border-red-500 focus:border-red-500 focus:outline-none focus:ring-0"
                 : ""
diff --git a/packages/features/eventtypes/components/CreateEventTypeForm.tsx b/packages/features/eventtypes/components/CreateEventTypeForm.tsx
index bc1398046e..c17c7a8482 100644
--- a/packages/features/eventtypes/components/CreateEventTypeForm.tsx
+++ b/packages/features/eventtypes/components/CreateEventTypeForm.tsx
@@ -66,11 +66,13 @@ export default function CreateEventTypeForm({
                 !isPlatform ? (
                   <Tooltip content={!isManagedEventType ? pageSlug : t("username_placeholder")}>
                     <span className="max-w-24 md:max-w-56">
-                      /{!isManagedEventType ? pageSlug : t("username_placeholder")}/
+                      {`/${!isManagedEventType ? pageSlug : t("username_placeholder")}/`}
                     </span>
                   </Tooltip>
                 ) : undefined
               }
+              containerClassName="[&>div]:gap-0"
+              className="pl-0"
               {...register("slug")}
               onChange={(e) => {
                 form.setValue("slug", slugify(e?.target.value), { shouldTouch: true });
@@ -91,11 +93,13 @@ export default function CreateEventTypeForm({
                   <Tooltip
                     content={`${urlPrefix}/${!isManagedEventType ? pageSlug : t("username_placeholder")}/`}>
                     <span className="max-w-24 md:max-w-56">
-                      {urlPrefix}/{!isManagedEventType ? pageSlug : t("username_placeholder")}/
+                      {`${urlPrefix}/${!isManagedEventType ? pageSlug : t("username_placeholder")}/`}
                     </span>
                   </Tooltip>
                 ) : undefined
               }
+              containerClassName="[&>div]:gap-0"
+              className="pl-0"
               {...register("slug")}
               onChange={(e) => {
                 form.setValue("slug", slugify(e?.target.value), { shouldTouch: true });
diff --git a/packages/features/eventtypes/components/tabs/setup/EventSetupTab.tsx b/packages/features/eventtypes/components/tabs/setup/EventSetupTab.tsx
index 82e6df350c..56ee20296d 100644
--- a/packages/features/eventtypes/components/tabs/setup/EventSetupTab.tsx
+++ b/packages/features/eventtypes/components/tabs/setup/EventSetupTab.tsx
@@ -208,9 +208,12 @@ export const EventSetupTab = (
             {...(isManagedEventType || isChildrenManagedEventType ? urlLockedProps : {})}
             defaultValue={eventType.slug}
             data-testid="event-slug"
-            containerClassName={classNames(customClassNames?.titleSection?.urlInput?.container)}
+            containerClassName={classNames(
+              "[&>div]:gap-0",
+              customClassNames?.titleSection?.urlInput?.container
+            )}
             labelClassName={classNames(customClassNames?.titleSection?.urlInput?.label)}
-            className={classNames(customClassNames?.titleSection?.urlInput?.input)}
+            className={classNames("pl-0", customClassNames?.titleSection?.urlInput?.input)}
             addOnLeading={
               isPlatform ? undefined : (
                 <>