bug: Languages in ContributorCard expand when the name is too long

[eryc-cc]

Summary

Two things:

1. When language label is too big, it increases the size of the entire component. We can break the line.
2. The language color bar should be relative to how much code that person has written.

1 - Name is too long

Hey @sungoldtech I noticed there's an issue where if the text is large, it'll make everything expand. Maybe we should make the extra characters break to a new line.

I can also reference this in a new issue, so we can get this PR moving...

bug-overlap.mov

Originally posted by @pixelsbyeryc in #441 (review)

---

2 - Language color bar percentage should be relative

They should also be sized relative to the amount of code, like GitHub does...

Here's an example of GitHub: the size of each color is different, related to how much code is in that language

[OgDev-01]

@pixelsbyeryc I think I've done the work to make the language color bar relative to the percentageUsed on #441. but the data we are getting currently has similar percentageUsed on all languages 👌.

[OgDev-01]

hey @pixelsbyeryc, looking closely at what we have now, I was thinking truncating the language name and adding a tooltip would look better than breaking into a new line 🙌.

breaking to a new line currently looks off

with trucate

then tooltip

let me know your take on this 🙏🙏

[eryc-cc]

I was thinking truncating the language name and adding a tooltip would look better than breaking into a new line 🙌.

@sungoldtech that works!

Do we have a tooltip component? cc @bdougie @brandonroberts

I designed a tooltip that you can use (click here to see).

[bdougie]

We do not, but I do like this better than the browser tooltip. We add this as an atom component and go from there.

[github-actions]

🎉 This issue has been resolved in version 1.12.0-beta.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 1.12.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀