diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 915a36d242ba2..e9783e87ed679 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -16,7 +16,7 @@ import {
 } from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useDebouncedInput } from '@wordpress/compose';
+import { useDebouncedInput, useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -67,6 +67,8 @@ function InserterMenu(
 	const [ patternFilter, setPatternFilter ] = useState( 'all' );
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
+	const isLargeViewport = ! useViewportMatch( 'medium', '<' );
+
 	function getInitialTab() {
 		if ( __experimentalInitialTab ) {
 			return __experimentalInitialTab;
@@ -80,7 +82,7 @@ function InserterMenu(
 
 	const shouldUseZoomOut =
 		selectedTab === 'patterns' || selectedTab === 'media';
-	useZoomOut( shouldUseZoomOut );
+	useZoomOut( shouldUseZoomOut && isLargeViewport );
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {
diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index bc2d325e81d61..bcf5d9ff882f7 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -9,7 +9,6 @@ import { useEffect } from '@wordpress/element';
  */
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
-import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
@@ -21,13 +20,12 @@ export function useZoomOut( zoomOut = true ) {
 		useDispatch( blockEditorStore )
 	);
 	const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
-	const isWideViewport = useViewportMatch( 'large' );
 
 	useEffect( () => {
 		const isZoomOutOnMount = isZoomOut();
 
 		return () => {
-			if ( isZoomOutOnMount && isWideViewport ) {
+			if ( isZoomOutOnMount ) {
 				setZoomLevel( 'auto-scaled' );
 			} else {
 				resetZoomLevel();
@@ -36,10 +34,10 @@ export function useZoomOut( zoomOut = true ) {
 	}, [] );
 
 	useEffect( () => {
-		if ( zoomOut && isWideViewport ) {
+		if ( zoomOut ) {
 			setZoomLevel( 'auto-scaled' );
 		} else {
 			resetZoomLevel();
 		}
-	}, [ zoomOut, setZoomLevel, resetZoomLevel, isWideViewport ] );
+	}, [ zoomOut, setZoomLevel, resetZoomLevel ] );
 }