Metaboxes: Try showing the metaboxes under the editor's content

not hiden under a panel

editor/layout/style.scss

@@ -5,11 +5,22 @@
 
 .editor-layout {
 	position: relative;
+
+	.components-notice-list {
+		position: fixed;
+		top: 100px;
+		right: auto;
+	}
+
+	.editor-meta-boxes-iframe {
+		max-width: $visual-editor-max-width;
+		margin: 10px auto 0;
+		padding: 10px 0;
+		border-top: 1px solid $light-gray-500;
+	}
 }
 
 .editor-layout__content {
-	display: flex;
-	flex-direction: column;
 	margin-top: #{ -1 * $header-height };
 
 	@include break-medium {
@@ -21,9 +32,3 @@
 	flex-basis: 100%;
 	overflow-y: auto;
 }
-
-.editor-layout .components-notice-list {
-	position: fixed;
-	top: 100px;
-	right: auto;
-}

editor/meta-boxes/index.js

@@ -10,11 +10,15 @@ import MetaBoxesIframe from './meta-boxes-iframe';
 import MetaBoxesPanel from './meta-boxes-panel';
 import { getMetaBox } from '../selectors';
 
-function MetaBox( { location, isActive } ) {
+function MetaBox( { location, isActive, usePanel = false } ) {
 	if ( ! isActive ) {
 		return null;
 	}
 
+	if ( ! usePanel ) {
+		return <MetaBoxesIframe location={ location } />;
+	}
+
 	return (
 		<MetaBoxesPanel>
 			<MetaBoxesIframe location={ location } />

editor/modes/visual-editor/style.scss

@@ -2,7 +2,7 @@
 	position: relative;
 	height: 100%;
 	margin: 0 auto;
-	padding: 50px 0;	// Floating up/down arrows invisible
+	padding: 50px 0 0;	// Floating up/down arrows invisible
 
 	&,
 	& p {
@@ -12,11 +12,11 @@
 	}
 
 	@include break-small() {
-		padding: 50px 0;
+		padding: 50px 0 0;
 	}
 
 	@include break-large() {
-		padding: 60px 0;
+		padding: 60px 0 0;
 	}
 }
 

editor/sidebar/post-settings/index.js

@@ -27,7 +27,7 @@ const panel = (
 		<DiscussionPanel />
 		<PageAttributes />
 		<DocumentOutlinePanel />
-		<MetaBoxes location="side" />
+		<MetaBoxes location="side" usePanel />
 	</Panel>
 );