`Tabs` obscure unintentional horizontal overflow

[stokesman]

Description

I happened to have a custom post type whose singular name surfaces an issue with horizontal overflow in the Tabs component.

https://github.com/user-attachments/assets/2ce0dd0d-756d-4de2-b38b-05c61b97b4d8

The particular text string is not important and probably dependent on OS/font settings for it to surface the issue. In my case it was hard to find other strings that reproduce this and maybe there’s a better way to surface this.

---

This isn’t reproducable in 6.6.1 but I haven’t tested 6.6.2 or others.

Step-by-step reproduction instructions

This probably can be hard to reproduce the best shot will be on macOS since that’s where I found it.

With the following code in an active plugin; appending it in gutenberg.php works well.

function revise_singular_name( $labels ) {
    $labels->singular_name = 'Term Set';
    return $labels;
}

add_filter( 'post_type_labels_post', 'revise_singular_name', 10, 1 );

1. Open a post
2. Open the settings sidebar if needed
3. Select the "Block" tab
4. Spot the horizontal scrollbar/overflow

Screenshots, screen recording, code snippet

No response

Environment info

• Gutenberg trunk
• macOS 13.6.9
• Vivaldi (Chrome-based browser)

Please confirm that you have searched existing issues in the repo.

• [x] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [x] Yes

Please confirm which theme type you used for testing.

• [x] Block
• [ ] Classic
• [ ] Hybrid (e.g. classic with theme.json)
• [ ] Not sure

[stokesman]

@DaniGuardiola, I'm pinging you since to best of my knowledge you’ve headed up the recent Tabs work. I think this issue is quite obscure (therefore really not a priority) and I just hope you can reproduce it easily.

In case you can reproduce and can devote some effort for a fix, this diff might be worth a try as it fixed it for me but has not been tested enough to know if it doesn’t cause other issues.

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index 717316227d..684bd19add 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -21,7 +21,7 @@ export const StyledTabList = styled( Ariakit.TabList )`
    }

    :where( [aria-orientation='horizontal'] ) {
-       width: fit-content;
+       flex: 1;
    }

    --direction-factor: 1;
@@ -156,7 +156,7 @@ export const Tab = styled( Ariakit.Tab )`
        border: none;
        box-shadow: none;

-       flex: 1 0 auto;
+       flex: 0 0 auto;
        white-space: nowrap;
        display: flex;
        align-items: center;

[DaniGuardiola]

cc @ciampo