fix(tabs): tab headers jump in width when navigating through them

[mihai-albu-sage]

fixes: #6554

Proposed behaviour

The width for the StyledTab component has been changed from auto and it is computed based on the value received from headerWidth preventing any resizing to occur.

after.mp4

Current behaviour

When the Tabs component has align="left", position="left" and headerWidth is specified the width of the StyledTab component is set to auto allowing it to resize based on the inner content.

before.mp4

Checklist

• Commits follow our style guide
• Related issues linked in commit messages if required
• Screenshots are included in the PR if useful
• All themes are supported if required
• Unit tests added or updated if required
• Playwright automation tests added or updated if required
• Storybook added or updated if required
• Translations added or updated (including creating or amending translation keys table in storybook) if required
• Typescript d.ts file added or updated if required
• Related docs have been updated if required

QA

• Tested in provided StackBlitz sandbox/Storybook
• Add new Playwright test coverage if required
• Carbon implementation matches Design System/designs
• UI Tests GitHub check reviewed if required

Additional context

Testing instructions

[carbonci]

🎉 This PR is included in version 142.11.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀