Tag - Overflow with longer text fix

[dchyun]

📌 Summary

If merged, this PR would fix an issue observe in the Tag where the dismiss button background overflows the border when the text wraps to multiple lines. It would also improve the support for longer text in the tags used in SuperSelect::Multiple.

🛠️ Detailed description

It was observed in the Tag that when the text exceeds 3 lines, the background of the dismiss button obscures the border of the element.

Reducing the border radius of the tag set with $hds-tag-border-radius from 50px to 20px resulted in the overflow issue being fixed with 3 lines of text.

While the change would create visual changes for tags with more than 3 lines of text, there are no visual changes to tags with 1 or 2 lines.

The $hds-tag-border-radius variable is also used in the SuperSelect::Multiple, and updating this value to 20px as well improved the readability of the tags with longer text.

📸 Screenshots

Tag - Before

Tag - After

SuperSelect::Multiple - Before

SuperSelect::Multiple - After

🔗 External links

Jira ticket: HDS-3854

---

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Dec 26, 2024 5:30pm
hds-website	✅ Ready (Inspect)	Visit Preview	Dec 26, 2024 5:30pm