[C-1939] More than two emails after member enrichment make the emails column Inconsistent

[skwowet]

Following member enrichment (see screenshot), the 'emails' column overflowed with multiple entries, causing UI inconsistencies. Instead, we could display '+2' or similar to represent additional emails, akin to our handling of excess tags.

_{From SyncLinear.com | C-1939}

[Bhardwaj-Himanshu]

Hi @yeganathan18 , let me know on how you are working to tackling this issue!
The proposed solution is quite right to display +X which would maintain consistencies within the UI.
-which in my little knowledge could be targeted via printing on the first 3 or 2 emails, but I don't know how to tackle on the same!
And let me know if I could be of any help to you!
Thanks

[skwowet]

Hey, appreciate your interest in the fix!

In the case of tags, when we add more than 3-4 for a member it shows up like tag1 tag2 tag3followed by a +2 and I'd love to see similar stuff for the emails column as well if it's more than two/three, where hovering over the number would reveal the leftover emails.

I'm also looping in our product designer @nunoeufrasio for a quick suggestion 😄

[Bhardwaj-Himanshu]

Yep, thanks for the warm regards;)
Let me know when we could start working on this enhancement feature and if I could be of any help to you!

[nunoeufrasio]

@Bhardwaj-Himanshu @yeganathan18 hope this visual reference can help 🙂 when more than 3, apply the +N pattern. Let me know if you need anything else.

[Bhardwaj-Himanshu]

Sweet, let's start working on this issue now @yeganathan18. Just a small request as I am currently starting to learn web-development, I would love to see you work and how do you arrive on the solution! So that even I gain a little watch and learn experience!

Could you document or DM even the small steps here, like what was your thinking behind solution and why/how you did it
Looking forward to this;)

[skwowet]

Hey @Bhardwaj-Himanshu!, I'm really stoked you're eager to learn! Unfortunately, I've got my plate full with other high-priority tasks at the moment and can't dive into this issue myself right now.

But, our team would be super happy to help you if you're interested in working on the issue 😄

By the way, don't forget to jump on our Discord server if you haven't already. (Insider tip: It's a great place to meet and chat with other contributors!)

[Bhardwaj-Himanshu]

I would love to hop onto this issue then @yeganathan18 . Overflowing your plate with my DM's too then;)

Let me dive into documentation for now, and just so if you could point out from which part of code this problem is arising?
That would be a good start for me, could take longer than usual, cause me being new! But hey, will be fixed!

[skwowet]

You can find the code for members table in: /frontend/src/modules/member/components/list/member-list-table.vue

[peoray]

Picking this up :)

[skwowet]

@peoray Thanks for picking up the issue! I've assigned the issue to you 😄