Fix small visual glitches

WordPress · Jun 16, 2020 · 8102b10 · 8102b10
1 parent 187a372
commit 8102b10
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -117,18 +117,21 @@ function InserterMenu( {
 			onKeyDown={ onKeyDown }
 		>
 			<div className="block-editor-inserter__main-area">
-				<InserterSearchForm onChange={ setFilterValue } />
-				{ showPatterns && (
-					<InserterTabs>
-						{ ( tab ) => {
-							if ( tab.name === 'blocks' ) {
-								return blocksTab;
-							}
-							return patternsTab;
-						} }
-					</InserterTabs>
-				) }
-				{ ! showPatterns && blocksTab }
+				{ /* the following div is necessary to fix the sticky position of the search form */ }
+				<div className="block-editor-inserter__content">
+					<InserterSearchForm onChange={ setFilterValue } />
+					{ showPatterns && (
+						<InserterTabs>
+							{ ( tab ) => {
+								if ( tab.name === 'blocks' ) {
+									return blocksTab;
+								}
+								return patternsTab;
+							} }
+						</InserterTabs>
+					) }
+					{ ! showPatterns && blocksTab }
+				</div>
 			</div>
 			{ showInserterHelpPanel && hoveredItem && (
 				<div className="block-editor-inserter__preview-container">

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -254,7 +254,6 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__quick-inserter-results {
 	padding-bottom: $grid-unit-20;
-	margin-top: -$grid-unit-10;
 
 	.block-editor-inserter__panel-header {
 		height: 0;