Package

@carbon/react

Browser

Chrome

Package version

v1.53.1

React version

v18.2.0

Description

The tab is not handling the long names properly, it is cutting off in smaller window and so the entire label text is not visible. Attaching the screenshot for reference where the text cut off and also boarder is incorrect & it doesn't render properly.

It'd be great if we have an option to be able to set a max char limit and then it could add the ... ellipsis as needed with tooltip, something like this

Reproduction/example

https://stackblitz.com/edit/github-8ktu82?file=src%2FApp.jsx

Steps to reproduce

Add more than 3 tabs, and one with long label text in it.

Suggested Severity

None

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems