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 <[email protected]> Co-authored-by: creativecoder <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: jordesign <[email protected]> Co-authored-by: matiasbenedetto <[email protected]>
WordPress · Apr 11, 2024 · c86e77f · c86e77f · github-actions · Apr 11, 2024
1 parent 1f21f61
commit c86e77f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 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
@@ -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
@@ -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;
 	}
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -181,7 +181,6 @@ function InstalledFonts() { @@
     							) ) }
     						</>
     					) }
-    					<Spacer margin={ 16 } />
     				</NavigatorScreen>
     				<NavigatorScreen path="/fontFamily">
@@ Expand Down @@