twenty icon indicating copy to clipboard operation
twenty copied to clipboard

Fix ellipsis overflow causing edit icon to be hidden on links

Open DevanandGowda opened this issue 1 year ago • 3 comments

Fixes #5064

Demo

https://github.com/twentyhq/twenty/assets/21654351/28ab7374-c57e-4f7e-9720-05138c53a33d

DevanandGowda avatar Apr 19 '24 23:04 DevanandGowda

Thanks a lot

That's the easy way to solve it. For pills it doesn't bother me to have a max-width everywhere. But for the email field for example it's not great as it has an impact on list views: Screenshot 2024-04-20 at 11 09 36

I wonder if you can find something smarter to avoid hardcoding a max width. Ideally w we should adapt when there's a buttonIcon or find another solution that doesn't affect list views. It might be a difficult problem but it'd be great if you can try - we can probably do better!

FelixMalfait avatar Apr 20 '24 09:04 FelixMalfait

Ahh good catch, wasn't aware the columns are extendable, so this effects all the fields including the email field.

I will see if I can try to avoid hardcoding the width while accomodating the edit button, might be possible by using something like visibility: hidden to retain the space occupied by the edit button.

Or perhaps we can implement something similar to what we do in the table, i.e have the edit button on right most edge of the field with higher z-index, although it might be annoying if the field value is small and the edit button still shows up in the right most edge.

Screenshot 2024-04-20 at 4 23 40 PM

DevanandGowda avatar Apr 20 '24 10:04 DevanandGowda

@FelixMalfait I went with the above idea, mainly becuase I felt it's more consistent with what's present in the table view. Additionally, this also fixes the issue you caught wrt email. Here's the demo, let me know what you think. Thanks.

https://github.com/twentyhq/twenty/assets/21654351/7e997937-7601-448f-91d2-b7bcb2d2e891

DevanandGowda avatar Apr 20 '24 19:04 DevanandGowda