From 1ff89b97ef00f9a35bbe3fe55dffaa3ed80e9bcd Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Tue, 18 Oct 2022 12:34:53 +0300
Subject: [PATCH] fix mobile styles

---
 .../inserter/media-tab/media-panel.js         |  4 +--
 .../src/components/inserter/style.scss        | 32 +++++++++++--------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/media-tab/media-panel.js b/packages/block-editor/src/components/inserter/media-tab/media-panel.js
index b2622a7f438d0..0874dea4a4ce2 100644
--- a/packages/block-editor/src/components/inserter/media-tab/media-panel.js
+++ b/packages/block-editor/src/components/inserter/media-tab/media-panel.js
@@ -14,6 +14,7 @@ import MediaList from './media-list';
 import { useMediaResults, useDebouncedInput } from './hooks';
 import InserterNoResults from '../no-results';
 
+const INITIAL_MEDIA_ITEMS_PER_PAGE = 10;
 const EMPTY_ARRAY = [];
 
 export function MediaCategoryDialog( { rootClientId, onInsert, category } ) {
@@ -26,7 +27,7 @@ export function MediaCategoryDialog( { rootClientId, onInsert, category } ) {
 		return () => clearTimeout( timeout );
 	}, [ category ] );
 	return (
-		<div ref={ container }>
+		<div ref={ container } className="block-editor-inserter__media-dialog">
 			<MediaCategoryPanel
 				rootClientId={ rootClientId }
 				onInsert={ onInsert }
@@ -36,7 +37,6 @@ export function MediaCategoryDialog( { rootClientId, onInsert, category } ) {
 	);
 }
 
-const INITIAL_MEDIA_ITEMS_PER_PAGE = 10;
 export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
 	const results = useMediaResults( {
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 7e9b21371ebb0..8c4df0dc6591c 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -528,7 +528,7 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__media-panel {
+.block-editor-inserter__media-dialog {
 	background: $gray-100;
 	border-left: $border-width solid $gray-200;
 	border-right: $border-width solid $gray-200;
@@ -554,21 +554,25 @@ $block-inserter-tabs-height: 44px;
 		}
 	}
 
-	&-title {
-		font-size: calc(1.25 * 13px);
-	}
-
-	&-spinner {
+	.block-editor-inserter__media-panel {
 		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
 
-	&-search {
-		&.components-search-control {
-			input[type="search"].components-search-control__input {
-				background: $white;
+		&-title {
+			font-size: calc(1.25 * 13px);
+		}
+
+		&-spinner {
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		&-search {
+			&.components-search-control {
+				input[type="search"].components-search-control__input {
+					background: $white;
+				}
 			}
 		}
 	}