From 5a0261618903337798bec79a1c0822ea012bbe80 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 12 Aug 2026 12:32:31 +0530
Subject: [PATCH] fix: inline editor in the contact sidebar clips longer values
 (#15403)

---
 .../inline-input/InlineInput.vue              |  2 +-
 .../conversation/contact/ContactInfo.vue      | 55 ++++++++++++-------
 .../conversation/contact/ContactInfoRow.vue   |  3 +-
 3 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/app/javascript/dashboard/components-next/inline-input/InlineInput.vue b/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
index 9a9960c97..c3e651e93 100644
--- a/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
+++ b/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
@@ -113,7 +113,7 @@ defineExpose({
       :disabled="disabled"
       :readonly="readonly"
       :class="customInputClass"
-      class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-none outline-none outline-0 bg-transparent dark:bg-transparent placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 dark:text-n-slate-12 transition-all duration-500 ease-in-out"
+      class="flex w-full min-w-0 reset-base text-sm h-6 !mb-0 border-0 rounded-none outline-none outline-0 bg-transparent dark:bg-transparent placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 dark:text-n-slate-12 transition-all duration-500 ease-in-out"
       @input="handleInput"
       @focus="handleFocus"
       @blur="handleBlur"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index 9cb6cea3d..f504d7b2d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -192,28 +192,41 @@ export default {
       </div>
 
       <div class="flex flex-col items-start gap-1.5 min-w-0 w-full">
-        <div v-if="showAvatar" class="flex items-center w-full min-w-0 gap-3">
-          <InlineInput
-            v-if="isEditingName"
-            ref="nameInput"
-            v-model="editName"
-            custom-input-class="!text-base !font-medium"
-            class="!w-fit"
-            @enter-press="saveNameEdit"
-            @escape-press="cancelNameEdit"
-            @blur="saveNameEdit"
-          />
-          <h3
-            v-else
-            class="group/name flex-shrink max-w-full min-w-0 my-0 text-base capitalize break-words text-n-slate-12 cursor-pointer hover:text-n-slate-12/80"
-            :title="$t('CONTACT_PANEL.CLICK_TO_EDIT')"
-            @click="startEditingName"
-          >
-            {{ contact.name }}
-            <span
-              class="i-lucide-pencil text-xs text-n-slate-10 opacity-0 group-hover/name:opacity-100 transition-opacity ml-1 align-middle"
+        <div v-if="showAvatar" class="flex items-center w-full min-w-0 gap-2">
+          <div class="group/name flex items-center min-w-0 gap-2">
+            <InlineInput
+              v-if="isEditingName"
+              ref="nameInput"
+              v-model="editName"
+              custom-input-class="!text-base !font-medium !w-auto max-w-full [field-sizing:content]"
+              class="!w-fit min-w-0"
+              @enter-press="saveNameEdit"
+              @escape-press="cancelNameEdit"
+              @blur="saveNameEdit"
             />
-          </h3>
+            <h3
+              v-else
+              class="flex-shrink max-w-full min-w-0 my-0 text-base capitalize break-words text-n-slate-12 cursor-pointer hover:text-n-slate-12/80"
+              :title="$t('CONTACT_PANEL.CLICK_TO_EDIT')"
+              @click="startEditingName"
+            >
+              {{ contact.name }}
+            </h3>
+            <NextButton
+              ghost
+              xs
+              slate
+              icon="i-lucide-pencil"
+              :title="$t('CONTACT_PANEL.CLICK_TO_EDIT')"
+              class="flex-shrink-0 -mx-1 opacity-0 transition-opacity"
+              :class="
+                isEditingName
+                  ? 'invisible'
+                  : 'group-hover/name:opacity-100 focus-visible:opacity-100'
+              "
+              @click="startEditingName"
+            />
+          </div>
           <div class="flex flex-row items-center gap-2">
             <span
               v-if="contact.created_at"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
index 0a2ca6fd9..4435e35d9 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
@@ -80,7 +80,7 @@ export default {
 <template>
   <div class="group/row w-full h-5 ltr:-ml-1 rtl:-mr-1">
     <!-- Inline edit mode -->
-    <div v-if="isEditing" class="flex items-center gap-2">
+    <div v-if="isEditing" class="flex items-center w-full min-w-0 gap-2">
       <EmojiOrIcon
         :icon="icon"
         :emoji="emoji"
@@ -91,7 +91,6 @@ export default {
         ref="editInput"
         v-model="editValue"
         :placeholder="title"
-        class="!w-fit"
         @enter-press="saveEdit"
         @escape-press="cancelEdit"
         @blur="saveEdit"