From 8bcac2aab003977d46a8dc246c3d363be1cb23c1 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <webofnithin@gmail.com>
Date: Tue, 4 May 2021 15:21:34 +0530
Subject: [PATCH] fix: Truncates overlapping name in contact table (#2208)

---
 .../contacts/components/ContactsTable.vue     | 39 +++++++++++--------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
index 5e0085680..25843a9e6 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -69,25 +69,28 @@ export default {
           align: 'left',
           width: 300,
           renderBodyCell: ({ row }) => (
-            <button
-              class="row--user-block cursor-pointer"
+            <WootButton
+              variant="clear"
+              size="expanded"
               onClick={() => this.onClickContact(row.id)}
             >
-              <Thumbnail
-                src={row.thumbnail}
-                size="36px"
-                username={row.name}
-                status={row.availability_status}
-              />
-              <div>
-                <h6 class="sub-block-title user-name text-truncate">
-                  {row.name}
-                </h6>
-                <button class="button clear small">
-                  {this.$t('CONTACTS_PAGE.LIST.VIEW_DETAILS')}
-                </button>
+              <div class="row--user-block">
+                <Thumbnail
+                  src={row.thumbnail}
+                  size="36px"
+                  username={row.name}
+                  status={row.availability_status}
+                />
+                <div class="user-block">
+                  <h6 class="sub-block-title user-name text-truncate">
+                    {row.name}
+                  </h6>
+                  <span class="button clear small">
+                    {this.$t('CONTACTS_PAGE.LIST.VIEW_DETAILS')}
+                  </span>
+                </div>
               </div>
-            </button>
+            </WootButton>
           ),
         },
         {
@@ -225,6 +228,10 @@ export default {
     display: flex;
     text-align: left;
 
+    .user-block {
+      min-width: 0;
+    }
+
     .user-thumbnail-box {
       margin-right: var(--space-small);
     }