From 09429f24f3873452543385c44213ba596b910cac Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 11 Jul 2024 16:23:46 +0100 Subject: [PATCH] Make all vertically oriented tabs have a min height of 40px --- packages/block-editor/src/components/inserter/style.scss | 1 - packages/components/src/tabs/styles.ts | 6 ++++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 528ccce42dd12..8660e1e304481 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -243,7 +243,6 @@ $block-inserter-tabs-height: 44px; display: block; position: relative; height: auto; - min-height: 40px; &[aria-selected="true"] { color: var(--wp-admin-theme-color); 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 )`