Refactor LeftSidebar panel styling

WordPress · Nov 5, 2020 · af4c437 · af4c437
1 parent dcef19e
commit af4c437
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 4 deletions.
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -223,8 +223,8 @@ function Editor() {
 													}
 													leftSidebar={
 														isInserterOpen ? (
-															<div className="edit-site-inserter-panel">
-																<div className="edit-site-inserter-panel__header">
+															<div className="edit-site-editor__inserter-panel">
+																<div className="edit-site-editor__inserter-panel-header">
 																	<Button
 																		icon={
 																			close
@@ -236,7 +236,7 @@ function Editor() {
 																		}
 																	/>
 																</div>
-																<div className="edit-site-inserter-panel__content">
+																<div className="edit-site-editor__inserter-panel-content">
 																	<Library
 																		showInserterHelpPanel
 																		onSelect={ () => {

diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
@@ -23,3 +23,29 @@
 .edit-site-visual-editor {
 	background-color: $white;
 }
+
+.edit-site-editor__inserter-panel {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.edit-site-editor__inserter-panel-header {
+	padding-top: $grid-unit-10;
+	padding-right: $grid-unit-10;
+	display: flex;
+	justify-content: flex-end;
+
+	@include break-medium() {
+		display: none;
+	}
+}
+
+.edit-site-editor__inserter-panel-content {
+	// Leave space for the close button
+	height: calc(100% - #{$button-size} - #{$grid-unit-10});
+
+	@include break-medium() {
+		height: 100%;
+	}
+}
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
@@ -5,7 +5,6 @@
 @import "./components/header/document-actions/style.scss";
 @import "./components/header/fullscreen-mode-close/style.scss";
 @import "./components/header/more-menu/style.scss";
-@import "./components/left-sidebar/inserter-panel/style.scss";
 @import "./components/navigation-sidebar/navigation-toggle/style.scss";
 @import "./components/navigation-sidebar/navigation-panel/style.scss";
 @import "./components/notices/style.scss";