Fix overflowing inserter panel header causing extra scrollbar

WordPress · Oct 18, 2024 · 0da3e74 · 0da3e74
1 parent d330f30
commit 0da3e74
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -123,6 +123,12 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__panel-header {
+	// Use `position: relative` to ensure any absolute positioned child elements are
+	// positioned relative to the panel header.
+	// This makes the overflow rule of the panel work correctly, particularly when the
+	// `VisuallyHidden` component is used within the inserter UI.
+	position: relative;
+
 	display: inline-flex;
 	align-items: center;
 	padding: $grid-unit-20 $grid-unit-20 0;

diff --git a/packages/block-editor/src/components/tabbed-sidebar/style.scss b/packages/block-editor/src/components/tabbed-sidebar/style.scss
@@ -32,4 +32,10 @@
 	flex-direction: column;
 	overflow-y: auto;
 	scrollbar-gutter: auto;
+
+	// Use `position: relative` to ensure any absolute positioned child elements are
+	// positioned relative to the tab panel.
+	// This makes the overflow rule of the panel work correctly, particularly when the
+	// `VisuallyHidden` component is used within the inserter UI.
+	position: relative;
 }