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.

tabs-obscure-overflow.mp4

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.

• Yes

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

• Yes

Please confirm which theme type you used for testing.

• 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

[ciampo]

@stokesman I'll look into it, thank you for reporting!

Please direct all Tabs-related conversation to @WordPress/gutenberg-components, as unfortunately, Dani won't be able to help out with it going forward.

[ciampo]

As for the bug:

• good news is that I can reproduce it by following your instructions on latest Chrome on MacOS;
• this feels like a sub-pixel precision issue of the "selected tab" indicator, rounding the --selected-width CSS variable seems to fix the issue:

Kapture.2024-10-24.at.14.49.43.mp4

Opened a PR with a potential fix: #66426

[tyxla]

Thank you @stokesman and @ciampo 🚀