From 25c18ac266fac970b1dae241fb989d7bc792e798 Mon Sep 17 00:00:00 2001
From: Sarah Norris <1645628+mikachan@users.noreply.github.com>
Date: Thu, 11 Apr 2024 17:11:04 +0100
Subject: [PATCH] Font Library: Fix modal scrollbar (#60641)

* Make footer a fixed height; add margin to modal content

* Remove Spacer from bottom of Library tab content

* Add variable for footer height size

Co-authored-by: mikachan <mikachan@git.wordpress.org>
Co-authored-by: creativecoder <grantmkin@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jordesign <jordesign@git.wordpress.org>
Co-authored-by: matiasbenedetto <mmaattiiaass@git.wordpress.org>
---
 .../global-styles/font-library-modal/installed-fonts.js     | 1 -
 .../components/global-styles/font-library-modal/style.scss  | 6 ++++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
index 69e645f57e612..9735eea815f86 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -181,7 +181,6 @@ function InstalledFonts() {
 							) ) }
 						</>
 					) }
-					<Spacer margin={ 16 } />
 				</NavigatorScreen>
 
 				<NavigatorScreen path="/fontFamily">
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 cfc42aa63a5c5..c823b8f1280ab 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,3 +1,7 @@
+// Fixed height for the modal footer.
+// Ensures that the footer is always visible when the modal content is scrollable.
+$footer-height: 70px;
+
 .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.
@@ -15,6 +19,7 @@
 
 	.components-modal__content {
 		padding-top: 0;
+		margin-bottom: $footer-height;
 	}
 
 	.font-library-modal__subtitle {
@@ -40,6 +45,7 @@
 		position: absolute;
 		bottom: $grid-unit-40;
 		width: 100%;
+		height: $footer-height;
 		background-color: $white;
 	}
 }