diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 21ece7c6aaed3..9f3731a282d26 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -12,6 +12,7 @@ - `CustomSelectControlV2`: animate select popover appearance. ([#63343](https://github.com/WordPress/gutenberg/pull/63343)) - `CustomSelectControlV2`: do not flip popover if legacy adapter. ([#63357](https://github.com/WordPress/gutenberg/pull/63357)). - `DropdownMenuV2`: invert animation direction. ([#63443](https://github.com/WordPress/gutenberg/pull/63443)). +- `Tabs`: Vertical Tabs should be 40px min height. ([#63446](https://github.com/WordPress/gutenberg/pull/63446)). ### Enhancements diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts index 88e54285d619b..7d67f462c7e87 100644 --- a/packages/components/src/tabs/styles.ts +++ b/packages/components/src/tabs/styles.ts @@ -120,6 +120,12 @@ export const Tab = styled( Ariakit.Tab )` opacity: 1; } } + + [aria-orientation='vertical'] & { + min-height: ${ space( + 10 + ) }; // Avoid fixed height to allow for long strings that go in multiple lines. + } `; export const TabPanel = styled( Ariakit.TabPanel )`