The issue involves a UI bug in the tabs component that requires careful handling of tab size changes.
The tabs component's selected tab underline incorrectly positions itself when sibling tabs change size, particularly evident in the site editor. The fix requires updating the underline position logic to account for sibling tab size changes, but the implementation could become complex due to the current code structure.
The tabs component has a fancy animated underline that indicates the selected tab.
Unfortunately the underline can be positioned incorrectly if a sibling tab changes size.
This bug is evident in the site editor when accessing a template part. The block inspector's first tab changes from 'Template' to 'Template Part'. The neighbouring tab moves to the right or left, but the underline stays in place. It can also cause an overflow of the tabs component resulting in a scrollbar.
Looking at the code, it tracks changes to only the selected tab, so if the selected tab doesn't change the underline isn't recomputed: https://github.com/WordPress/gutenberg/blob/9ab818b358f8f884053be7ef3de883730ab3a024/packages/components/src/tabs/tablist.tsx#L92-L94
This is quite a lot already for a little underline, and I think the fix has the potential to make the code too complicated, so I didn't push a PR for it. It might be worth reconsidering some parts of the implementation.
Note: some of my colleagues couldn't reproduce this, but one other person could. It may be browser dependent. I reproduced in Brave and a colleague reproduced in Safari.
Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!