Navigation Screen: Correctly display notices (#34852)

WordPress · Sep 16, 2021 · 11c5757 · 11c5757
1 parent ed44398
commit 11c5757
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 10 deletions.
diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js
@@ -109,7 +109,6 @@ export default function Layout( { blockEditorSettings } ) {
 					<BlockEditorKeyboardShortcuts.Register />
 					<NavigationEditorShortcuts.Register />
 					<NavigationEditorShortcuts saveBlocks={ savePost } />
-					<Notices />
 					<BlockEditorProvider
 						value={ blocks }
 						onInput={ onInput }
@@ -142,6 +141,7 @@ export default function Layout( { blockEditorSettings } ) {
 								}
 								content={
 									<>
+										<Notices />
 										{ ! hasFinishedInitialLoad && (
 											<Spinner />
 										) }

diff --git a/packages/edit-navigation/src/components/notices/style.scss b/packages/edit-navigation/src/components/notices/style.scss
@@ -5,18 +5,13 @@
 }
 
 .edit-navigation-notices__notice-list {
-	// The page has a 10px left margin at narrower widths, reverse that so that the notice sits flush.
-	margin-left: -10px;
-
-	@include break-medium {
-		// The page has a 20px left margin at wider widths, reverse that so that the notice sits flush.
-		margin-left: -20px;
-	}
-
 	// Notices have some unusual margin and padding by default, reset that.
 	.components-notice {
+		box-sizing: border-box;
 		margin: 0;
-		padding-right: 12px;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+		padding: 0 12px;
+		min-height: 60px;
 
 		// Make sure the close button is centered.
 		.components-button {