Fix mobile styles for inserter pattern and media tab navigation (Word…

…Press#63451)
bph · Jul 12, 2024 · 9f8014a · 9f8014a
1 parent 7aca421
commit 9f8014a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 24 deletions.
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -291,34 +291,35 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__category-panel {
-	background: $gray-100;
-	border-top: $border-width solid $gray-200;
-	box-shadow: $border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
 	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
-	position: absolute;
-	top: -$border-width;
-	left: 0;
-	height: calc(100% + #{$border-width});
-	width: 100%;
-	padding: 0 $grid-unit-20;
 	display: flex;
 	flex-direction: column;
+	padding: 0 $grid-unit-20;
 
 	@include break-medium {
 		border-left: $border-width solid $gray-200;
 		padding: 0;
 		left: 100%;
 		width: 300px;
-	}
-
-	.block-editor-inserter__media-list,
-	.block-editor-block-patterns-list {
-		padding: 0 $grid-unit-30 $grid-unit-20;
+		position: absolute;
+		top: -$border-width;
+		height: calc(100% + #{$border-width});
+		background: $gray-100;
+		border-top: $border-width solid $gray-200;
+		box-shadow: $border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
+
+		.block-editor-inserter__media-list,
+		.block-editor-block-patterns-list {
+			padding: 0 $grid-unit-30 $grid-unit-20;
+		}
 	}
 }
 
 .block-editor-inserter__patterns-category-panel-header {
-	padding: $grid-unit-10 $grid-unit-30;
+	padding: $grid-unit-10 0;
+	@include break-medium {
+		padding: $grid-unit-10 $grid-unit-30;
+	}
 }
 
 .block-editor-inserter__patterns-category-no-results {
@@ -522,10 +523,15 @@ $block-inserter-tabs-height: 44px;
 	}
 
 	.block-editor-inserter__media-panel-search {
-		padding: $grid-unit-20 $grid-unit-30 $grid-unit-10;
+		margin-bottom: $grid-unit-20;
 		// TODO: Consider using the Theme component to automatically adapt to a gray background.
-		&:not(:focus-within) {
-			--wp-components-color-background: #{$white};
+		@include break-medium() {
+			margin-bottom: 0;
+			padding: $grid-unit-20 $grid-unit-30 $grid-unit-10;
+
+			&:not(:focus-within) {
+				--wp-components-color-background: #{$white};
+			}
 		}
 	}
 }

diff --git a/packages/editor/src/components/inserter-sidebar/style.scss b/packages/editor/src/components/inserter-sidebar/style.scss
@@ -7,10 +7,5 @@
 }
 
 .editor-inserter-sidebar__content {
-	// Leave space for the close button
-	height: calc(100% - #{$button-size} - #{$grid-unit-10});
-
-	@include break-medium() {
-		height: 100%;
-	}
+	height: 100%;
 }