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>

Author: 5 people

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">

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;
 	}
 }