From 065bccb9d8799c5d5c1b606b524be19c21b6cd75 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Sat, 23 Sep 2023 01:55:01 +0900
Subject: [PATCH] Font Library: fix modal width on mobile viewport (#54518)

* Font Library: fix modal width on mobile viewport

* Don't use internal selector

* Fix typo
---
 .../global-styles/font-library-modal/index.js          |  3 +--
 .../global-styles/font-library-modal/style.scss        | 10 ++++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
index b7cc9cb00d872b..60d3161985ac53 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/index.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
@@ -43,9 +43,8 @@ function FontLibraryModal( {
 		<Modal
 			title={ __( 'Fonts' ) }
 			onRequestClose={ onRequestClose }
-			isFullScreen={ true }
+			isFullScreen
 			className="font-library-modal"
-			style={ { width: '65vw' } }
 		>
 			<TabPanel
 				className="font-library-modal__tab-panel"
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index 62d31253ffd496..663aef94ab7e62 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -1,4 +1,14 @@
 .font-library-modal {
+	// @todo: If a new prop is added to the Modal component that constrains
+	// the content width, we should use that prop instead of this style.
+	// see https://github.com/WordPress/gutenberg/issues/54471.
+	&.font-library-modal {
+
+		@include break-medium() {
+			width: 65vw;
+		}
+	}
+
 	.components-modal__header {
 		border-bottom: none;
 	}