From 929fd98f13a21b6e989b2f76ca58d7b242fd55ba Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 27 Dec 2023 17:49:00 +0530
Subject: [PATCH] fix: show avatar with name if there is only one avatar in
 list

---
 frontend/src/components/MultipleAvatar.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/MultipleAvatar.vue b/frontend/src/components/MultipleAvatar.vue
index e84ddcd2..ff23e9fa 100644
--- a/frontend/src/components/MultipleAvatar.vue
+++ b/frontend/src/components/MultipleAvatar.vue
@@ -1,9 +1,24 @@
 <template>
   <div
     v-if="avatars?.length"
-    class="mr-1.5 flex cursor-pointer flex-row-reverse items-center"
+    class="mr-1.5 flex cursor-pointer items-center"
+    :class="[avatars?.length > 1 ? 'flex-row-reverse' : 'truncate [&>div]:truncate']"
   >
     <Tooltip
+      v-if="avatars?.length == 1"
+      :text="avatars[0].name"
+      class="flex items-center gap-2 text-base"
+    >
+      <Avatar
+        shape="circle"
+        :image="avatars[0].image"
+        :label="avatars[0].label"
+        size="md"
+      />
+      <div class="truncate">{{ avatars[0].label }}</div>
+    </Tooltip>
+    <Tooltip
+      v-else
       :text="avatar.name"
       v-for="avatar in reverseAvatars"
       :key="avatar.name"