UI: Tweak the notices design and position

WordPress · Nov 28, 2017 · c575dd5 · c575dd5
1 parent d1ee7a7
commit c575dd5
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/components/notice/style.scss b/components/notice/style.scss
@@ -1,8 +1,4 @@
 .components-notice-list {
-	position: fixed;
-	top: 40px;
-	right: 0;
 	min-width: 300px;
-	max-width: 550px;
 	z-index: z-index( ".components-notice-list" );
 }
diff --git a/editor/edit-post/layout/index.js b/editor/edit-post/layout/index.js
@@ -33,11 +33,11 @@ function Layout( { mode, isSidebarOpened } ) {
 	return (
 		<div className={ className }>
 			<DocumentTitle />
-			<EditorNotices />
 			<UnsavedChangesWarning />
 			<AutosaveMonitor />
 			<Header />
 			<div className="editor-layout__content" role="region" aria-label={ __( 'Editor content' ) } tabIndex="-1">
+				<EditorNotices />
 				<div className="editor-layout__editor">
 					{ mode === 'text' && <TextEditor /> }
 					{ mode === 'visual' && <VisualEditor /> }

diff --git a/editor/edit-post/layout/style.scss b/editor/edit-post/layout/style.scss
@@ -7,9 +7,20 @@
 	position: relative;
 
 	.components-notice-list {
-		position: fixed;
-		top: 100px;
-		right: auto;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+
+		.notice {
+			margin: 0 0 5px;
+			padding: 6px 12px;
+			min-height: $panel-header-height;
+
+			.notice-dismiss {
+				margin: 5px;
+			}
+		}
 	}
 }