diff --git a/packages/nc-gui/components/cell/ReadOnlyUser.vue b/packages/nc-gui/components/cell/ReadOnlyUser.vue
index 0330bb97bf..bcb1212465 100644
--- a/packages/nc-gui/components/cell/ReadOnlyUser.vue
+++ b/packages/nc-gui/components/cell/ReadOnlyUser.vue
@@ -15,7 +15,7 @@ provide(ActiveCellInj, ref(true))
 </script>
 
 <template>
-  <div class="relative">
+  <div class="relative w-full">
     <LazyCellUser class="z-0" :model-value="modelValue" />
     <div class="w-full h-full z-1 absolute top-0 left-0"></div>
   </div>
diff --git a/packages/nc-gui/components/general/UserIcon.vue b/packages/nc-gui/components/general/UserIcon.vue
index 9e528810ff..283bc04f9b 100644
--- a/packages/nc-gui/components/general/UserIcon.vue
+++ b/packages/nc-gui/components/general/UserIcon.vue
@@ -20,7 +20,7 @@ const email = computed(() => props?.email ?? '')
 
 const backgroundColor = computed(() => {
   // in comments we need to generate user icon from email
-  return displayName.value ? stringToColor(displayName.value) : email.value ? stringToColor(email.value) : '#FFFFFF'
+  return displayName.value ? stringToColor(displayName.value.trim()) : email.value ? stringToColor(email.value) : '#FFFFFF'
 })
 
 const usernameInitials = computed(() => {