From b16882040dd202fee2a394e47dd580f2f69741a0 Mon Sep 17 00:00:00 2001
From: peoray <peoray@yahoo.com>
Date: Tue, 12 Sep 2023 14:33:04 +0100
Subject: [PATCH 1/3] Add tooltip for truncated emails in member profile

---
 .../components/view/_aside/_aside-identities.vue  | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/modules/member/components/view/_aside/_aside-identities.vue b/frontend/src/modules/member/components/view/_aside/_aside-identities.vue
index 0ac0e3c7c7..ad1fbccc97 100644
--- a/frontend/src/modules/member/components/view/_aside/_aside-identities.vue
+++ b/frontend/src/modules/member/components/view/_aside/_aside-identities.vue
@@ -42,11 +42,16 @@
           target="_blank"
           rel="noopener noreferrer"
         >
-          <div class="flex gap-3 items-center">
-            <app-platform platform="email" />
-            <span class="text-gray-900 text-xs">
-              {{ email }}</span>
-          </div>
+          <el-tooltip
+            placement="top"
+            :content="email"
+          >
+            <div class="flex gap-3 items-center overflow-hidden">
+              <app-platform platform="email" />
+              <span class="text-gray-900 text-xs truncate">
+                {{ email }}</span>
+            </div>
+          </el-tooltip>
           <i
             class="ri-external-link-line text-gray-300"
           />

From 1a570474aaaf5d489da959a86a071835f0536820 Mon Sep 17 00:00:00 2001
From: peoray <peoray@yahoo.com>
Date: Tue, 12 Sep 2023 20:39:39 +0100
Subject: [PATCH 2/3] Disable tooltip when text is not truncated

---
 .../view/_aside/_aside-identities.vue         | 29 +++++++++++++++++--
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/frontend/src/modules/member/components/view/_aside/_aside-identities.vue b/frontend/src/modules/member/components/view/_aside/_aside-identities.vue
index ad1fbccc97..babb079ea7 100644
--- a/frontend/src/modules/member/components/view/_aside/_aside-identities.vue
+++ b/frontend/src/modules/member/components/view/_aside/_aside-identities.vue
@@ -35,7 +35,7 @@
       <el-divider class="border-t-gray-200" />
       <div class="mt-4">
         <a
-          v-for="email of emails"
+          v-for="(email, index) of emails"
           :key="email"
           class="py-2 px-6 -mx-6 flex justify-between items-center relative hover:bg-gray-50 transition-colors cursor-pointer"
           :href="`mailto:${email}`"
@@ -45,10 +45,16 @@
           <el-tooltip
             placement="top"
             :content="email"
+            :disabled="!showTooltip[index]"
           >
-            <div class="flex gap-3 items-center overflow-hidden">
+
+            <div
+              class="flex gap-3 items-center overflow-hidden mr-2"
+              @mouseover="handleOnMouseOver(index)"
+              @mouseleave="handleOnMouseLeave(index)"
+            >
               <app-platform platform="email" />
-              <span class="text-gray-900 text-xs truncate">
+              <span ref="emailRef" class="text-gray-900 text-xs truncate">
                 {{ email }}</span>
             </div>
           </el-tooltip>
@@ -86,6 +92,23 @@ const { currentTenant, currentUser } = mapGetters('auth');
 
 const identitiesDrawer = ref(false);
 
+const emailRef = ref([]);
+const showTooltip = ref([]);
+
+const handleOnMouseOver = (index) => {
+  if (!emailRef.value[index]) {
+    showTooltip.value[index] = false;
+  }
+
+  showTooltip.value[index] = emailRef.value[index].scrollWidth > emailRef.value[index].clientWidth;
+
+  console.log(emailRef.value);
+};
+
+const handleOnMouseLeave = (index) => {
+  showTooltip.value[index] = false;
+};
+
 const emails = computed(() => (props.member.emails
   // Filters out any falsy values (like `null`, `undefined)
   ? props.member.emails.filter(Boolean)

From 09089e77f0da3a877914f439d520be0edb56750d Mon Sep 17 00:00:00 2001
From: peoray <peoray@yahoo.com>
Date: Wed, 13 Sep 2023 20:25:30 +0100
Subject: [PATCH 3/3] remove console log

---
 .../modules/member/components/view/_aside/_aside-identities.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/modules/member/components/view/_aside/_aside-identities.vue b/frontend/src/modules/member/components/view/_aside/_aside-identities.vue
index babb079ea7..d95ca9e2fd 100644
--- a/frontend/src/modules/member/components/view/_aside/_aside-identities.vue
+++ b/frontend/src/modules/member/components/view/_aside/_aside-identities.vue
@@ -101,8 +101,6 @@ const handleOnMouseOver = (index) => {
   }
 
   showTooltip.value[index] = emailRef.value[index].scrollWidth > emailRef.value[index].clientWidth;
-
-  console.log(emailRef.value);
 };
 
 const handleOnMouseLeave = (index) => {