kunthawat/moreminimore-chat
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

fix: inline editor in the contact sidebar clips longer values (#15403)

Browse Source
This commit is contained in:
Sivin Varghese
2026-08-12 12:32:31 +05:30
committed by GitHub
parent 8397fa7eaf
commit 5a02616189
3 changed files with 36 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/dashboard/components-next/inline-input/InlineInput.vue
View File

@@ -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"

55
app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
View File

@@ -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"

3
app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
View File

@@ -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"