From 9f8014ad8aea4ed4602dca039c1c89624a01c330 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 12 Jul 2024 10:55:22 -0500
Subject: [PATCH] Fix mobile styles for inserter pattern and media tab
 navigation (#63451)

---
 .../src/components/inserter/style.scss        | 42 +++++++++++--------
 .../components/inserter-sidebar/style.scss    |  7 +---
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 90f3a7c64493e5..3e30f0713b5295 100644
--- 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
index 796bdebe221a6b..1c6155dbbe7c96 100644
--- 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%;
 }