diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js index 6236ea8fe3f246..b792a5c8246c0c 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js @@ -41,6 +41,9 @@ const DEFAULT_CATEGORY = { slug: 'all', name: _x( 'All', 'font categories' ), }; + +const MIN_WINDOW_HEIGHT = 500; + function FontCollection( { slug } ) { const requiresPermission = slug === 'google-fonts'; @@ -118,7 +121,8 @@ function FontCollection( { slug } ) { // NOTE: The height of the font library modal unavailable to use for rendering font family items is roughly 417px // The height of each font family item is 61px. - const pageSize = Math.floor( ( window.innerHeight - 417 ) / 61 ); + const windowHeight = Math.max( window.innerHeight, MIN_WINDOW_HEIGHT ); + const pageSize = Math.floor( ( windowHeight - 417 ) / 61 ); const totalPages = Math.ceil( fonts.length / pageSize ); const itemsStart = ( page - 1 ) * pageSize; const itemsLimit = page * pageSize;