From 2aae0d213c85f7e1c43e93f9907aa9c3493958df Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 18 Jan 2024 06:33:41 +0000
Subject: [PATCH] fix(nc-gui): test fail issue & row comments log user name
 udpates

---
 .../nc-gui/components/general/UserIcon.vue    |  2 +-
 .../smartsheet/expanded-form/Comments.vue     | 22 ++++++++++++++-----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/general/UserIcon.vue b/packages/nc-gui/components/general/UserIcon.vue
index ae50983cf7..61d9232e73 100644
--- a/packages/nc-gui/components/general/UserIcon.vue
+++ b/packages/nc-gui/components/general/UserIcon.vue
@@ -16,7 +16,7 @@ const props = withDefaults(
 
 const { size, email } = toRefs(props)
 
-const displayName = computed(() => props.name.trim())
+const displayName = computed(() => props.name?.trim() || '')
 
 const backgroundColor = computed(() => {
   // in comments we need to generate user icon from email
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
index 880a2ea70d..9988db87e8 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
@@ -215,12 +215,24 @@ const onClickAudit = () => {
               <div class="flex flex-col p-4 gap-3">
                 <div class="flex justify-between">
                   <div class="flex items-center gap-2">
-                    <GeneralUserIcon size="base" :name="log.display_name ?? log.user" :email="log.user" />
+                    <GeneralUserIcon size="base" :name="log.display_name" :email="log.user" />
 
                     <div class="flex flex-col">
-                      <span class="truncate font-bold max-w-42">
-                        {{ log.display_name ?? log.user.split('@')[0] ?? 'Shared source' }}
-                      </span>
+                      <NcTooltip class="truncate max-w-42" show-on-truncate-only>
+                        <template #title>
+                          {{ log.display_name?.trim() || log.user || 'Shared source' }}
+                        </template>
+                        <span
+                          class="text-ellipsis overflow-hidden font-bold"
+                          :style="{
+                            wordBreak: 'keep-all',
+                            whiteSpace: 'nowrap',
+                            display: 'inline',
+                          }"
+                        >
+                          {{ log.display_name?.trim() || log.user || 'Shared source' }}
+                        </span>
+                      </NcTooltip>
                       <div v-if="log.id !== editLog?.id" class="text-xs font-medium text-gray-500">
                         {{ log.created_at !== log.updated_at ? `Edited ${timeAgo(log.updated_at)}` : timeAgo(log.created_at) }}
                       </div>
@@ -298,7 +310,7 @@ const onClickAudit = () => {
           <div class="flex flex-col p-4 gap-3">
             <div class="flex justify-between">
               <div class="flex items-center gap-2">
-                <GeneralUserIcon size="base" :email="log.user" />
+                <GeneralUserIcon size="base" :email="log.user" :name="log.display_name" />
 
                 <div class="flex flex-col">
                   <NcTooltip class="truncate max-w-50" show-on-truncate-only>