From abed060503428218539ffc0e50dfb9707540be45 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Mon, 15 Jul 2024 11:51:03 +0100
Subject: [PATCH] Tabs: Vertical Tabs should be 40px min height (#63446)

* Inserter: Reduce the height of the categories tabs to 40px

* Make all vertically oriented tabs have a min height of 40px
---
 packages/components/CHANGELOG.md       | 1 +
 packages/components/src/tabs/styles.ts | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 21ece7c6aaed34..9f3731a282d262 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 88e54285d619b1..7d67f462c7e87e 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 )`