calcite-design-system Bordered Calcite Tabs does not allow for long tab titles

Actual Behavior

Calcite Tabs - bordered, long tab titles overflow. This happens only with bordered Tabs.

Expected Behavior

Long tab titles should not overflow and the tabs should allow for titles of any length (same as non-bordered tabs).

Reproduction Steps and Sample

Implement Calcite bordered Tabs with at least 2 tabs.
The second tab has a long title (at least longer than the first)
Notice that the tab title overflows

Sample: https://codepen.io/solowt/pen/poWEWJq?editors=1000

Relevant Info

Reproducible version: @esri/[email protected] (our app version) @esri/[email protected] (codepen sample version) Seeing the bug in multiple versions of Tabs

[ ] CDN
[x] NPM package

Dec 10 '21 17:12 tyanthony

@macandcheese I ran into a similar issue. Not sure if it's the same. Basically when using layout centered, the overflow will chop off the first part of the tab. https://codepen.io/paulcp/pen/rNJqbZO Should I open another issue for this centered case, or is this covered here?

Jun 09 '22 22:06 paulcpederson

Thanks for adding the additional issue case, I imagine they are related but when this is picked up, let’s confirm it solves as well.

Cc @benelan maybe this could be prioritized? Likely a css fix

Jun 09 '22 22:06 macandcheese

Wanted to bump this as well. Accidentally created and closed a duplicate issue #4712

Jun 10 '22 16:06 joeyHarig

This was resolved by https://github.com/Esri/calcite-components/pull/4714

Example: https://codepen.io/mac_and_cheese/pen/qBoPNba?editors=1000

Jul 26 '22 18:07 macandcheese

@macandcheese there was a regression in beta 91 and the centered tabs are broken again. https://codepen.io/paulcp/pen/rNJqbZO

If I use beta.86 this codepen works great, but if I use anything 91 and newer it's broken.

Not sure what caused this regression. We can open a new issue too, if that's easier.

Sep 01 '22 19:09 paulcpederson

There are several problems with tabs raised in this issue with regard to regression.

Part 1: Calcite Tabs confirmed to allow for long tab titles in the current release: https://codepen.io/elijbet/pen/zYjNpwz?editors=1010 Part 2: Is addressed in the PR. Part 3: Bordered and center layout does not work and looks like it never did. Does this need to be addressed as a new issue?