[Bug]: Tab with long label text is not rendering properly in smaller screens

[laxman-4656]

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

[Gururajj77]

This is the current spec around the width for each Tab, https://react.carbondesignsystem.com/?path=/story/components-toggle--default

[laxman-4656]

https://react.carbondesignsystem.com/?path=/story/components-toggle--default

@Gururajj77 This link is navigating to the Toggle component, but this issue is created for Tab component.

[tay1orjones]

Sorry for the mis-link, tabs are specced right now to be auto-width https://carbondesignsystem.com/components/tabs/style/#line-tab-structure

Since truncation isn't part of the spec, there's currently no mechanism to provide a tooltip or title like this. I'm not sure if we can add a Tooltip to the tab elements - they have role="tab". We'd need to look at the spec for that role.

[AmandaFurukawa]

To prevent this shouldn't we add a character limit to the tabs? Otherwise, scenarios like this are going to happen.

[thyhmdo]

Hi, we're working to update this. In the horizontal case, there's no truncation needed since tabs allow horizontal scrolling. However, we also don't recommend having the tab labels to be that long, it should be one to two words, as these are easier to scan. See Tabs Content.

Reference link for Overflow content: https://carbondesignsystem-git-fork-kingtra-fa0cca-carbon-design-system.vercel.app/components/tabs/usage/#overflow-content