fix mobile styles

WordPress · Oct 18, 2022 · 1ff89b9 · 1ff89b9
1 parent bc7d88c
commit 1ff89b9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 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
@@ -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
@@ -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;
+				}
 			}
 		}
 	}