From 0a0b32046fa9308df08c0b35394a594dfe297589 Mon Sep 17 00:00:00 2001
From: spandev <143828642+Spandan-Mishra@users.noreply.github.com>
Date: Fri, 16 Jan 2026 05:31:40 +0530
Subject: [PATCH] fix: spacing between editable heading and pencil fixed
 (#25500)

* fix: spacing in editable heading fixed

* fix: set pointer events auto in input

* fix: updated availability test

* fix: updated pointer events

---------

Co-authored-by: Pallav <90088723+Pallava-Joshi@users.noreply.github.com>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Pedro Castro <pedro@cal.com>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>
---
 apps/web/playwright/availability.e2e.ts       |  4 +++-
 .../editable-heading/EditableHeading.tsx      | 24 ++++++++++++-------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/apps/web/playwright/availability.e2e.ts b/apps/web/playwright/availability.e2e.ts
index ae1a5d83b6..6bc0d30334 100644
--- a/apps/web/playwright/availability.e2e.ts
+++ b/apps/web/playwright/availability.e2e.ts
@@ -147,7 +147,9 @@ test.describe("Availability", () => {
     const save = (await localize("en"))("save");
     const copyTimesTo = (await localize("en"))("copy_times_to");
 
-    await page.getByTestId("availablity-title").click();
+    const availTitle = page.getByTestId("availablity-title");
+    await availTitle.locator('xpath=..').locator('span.whitespace-pre').first().click();
+    await expect(availTitle).toBeEditable();
     // change availability name
     await page.getByTestId("availablity-title").fill("Working Hours test");
     await expect(page.getByTestId("subtitle").first()).toBeVisible();
diff --git a/packages/ui/components/editable-heading/EditableHeading.tsx b/packages/ui/components/editable-heading/EditableHeading.tsx
index caeb006154..076e51b883 100644
--- a/packages/ui/components/editable-heading/EditableHeading.tsx
+++ b/packages/ui/components/editable-heading/EditableHeading.tsx
@@ -23,7 +23,15 @@ export const EditableHeading = function EditableHeading({
     <div className="group pointer-events-auto relative truncate" onClick={enableEditing}>
       <div className={classNames(!disabled && "cursor-pointer", "flex items-center")}>
         <label className="min-w-8 relative inline-block">
-          <span className="whitespace-pre text-xl tracking-normal text-transparent">{value}&nbsp;</span>
+          <span
+            className={classNames(
+              "whitespace-pre text-xl tracking-normal w-full truncate cursor-pointer",
+              isEditing && "text-transparent"
+            )}
+          >
+            {value}
+          </span>
+
           <input
             {...passThroughProps}
             disabled={disabled}
@@ -31,23 +39,23 @@ export const EditableHeading = function EditableHeading({
             value={value}
             required
             className={classNames(
-              !disabled &&
-                "hover:text-default focus:text-emphasis cursor-pointer focus:outline-none focus:ring-0",
-              "text-emphasis absolute left-0 top-0 w-full truncate border-none bg-transparent p-0 align-top text-xl ",
+              !disabled && "hover:text-default focus:text-emphasis cursor-text",
+              "text-emphasis absolute left-0 top-0 w-full truncate border-none bg-transparent p-0 align-top text-xl transition-opacity",
+              isEditing ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none",
               passThroughProps.className
             )}
             onFocus={(e) => {
               setIsEditing(!disabled);
-              passThroughProps.onFocus && passThroughProps.onFocus(e);
+              passThroughProps.onFocus?.(e);
             }}
             onBlur={(e) => {
               setIsEditing(false);
-              passThroughProps.onBlur && passThroughProps.onBlur(e);
+              passThroughProps.onBlur?.(e);
             }}
-            onChange={(e) => onChange && onChange(e.target.value)}
+            onChange={(e) => onChange?.(e.target.value)}
           />
           {!isEditing && isReady && !disabled && (
-            <Icon name="pencil" className="text-subtle group-hover:text-subtle -mt-px ml-3 inline h-3 w-3" />
+            <Icon name="pencil" className="text-subtle group-hover:text-subtle -mt-px ml-1 inline h-4 w-4" />
           )}
         </label>
       </div>