Make Tabs have a fluid height

[afercia]

Fixes #62018

What?

The styling of the Tabs component doesn't take into account longer strings that wrap to multiple lines. The focus style overlaps the text and partially hides it.

Why?

Text should always be fully readable.
Fixed heights should be avoided as much as possible, to allow text to re-flow and adapt.

How?

• Makes the tabs height fluid.
• Simplifies the focus style: in this case there's no need to use both box-shadow and outline. The latter always works, also for Windows Hight Contrast Mode, and cam be styled exactly like the previous box-shadow.
• The default height is now a min-height of 48 pixels.

Testing Instructions

• Repeat the steps from the issue Tabs: focus style overlaps text when 'Show button text labels' preference is enabled #62018
• Observe the tabs height adapts to the content.
• Observe the focus style does not overlap text any longer.
• Thoroughly test all other instances of the Tab component e.g. but not limited to: Main inserter, Styles, Preferences modal dialog, Fonts modal dialog.

Testing Instructions for Keyboard

Screenshots or screencast

Before:

After:

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: huzaifaalmesbah <huzaifaalmesbah@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[huzaifaalmesbah]

This is looking good to me.

[ciampo]

Thank you for working on this, i'll take a look tomorrow

[mirka]

I went ahead and merged current trunk to test it with the most recent indicator styles for orientation="vertical".

I found two pre-existing problems which I broke out into a separate issue/PR, if anyone else notices them too:

• Tabs: "With Tab Icons" story has duplicated focus styles #63271
• Tabs: Fix text-align when text wraps in vertical mode #63272

Otherwise, code changes look good to me 👍

[afercia]

Thanks all for your review and feedback.