From 1e62218d4df79734720ac928d12119ff872e43a0 Mon Sep 17 00:00:00 2001
From: Jason Crist <jcrist@pbking.com>
Date: Thu, 25 Jan 2024 06:39:31 -0500
Subject: [PATCH] Removed <header> <main> and <footer> elements, replaced them
 with <div> elements and assigned new class names to leverage existing styles
 (#58221)

Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>
---
 .../font-library-modal/style.scss             |  4 +-
 .../font-library-modal/tab-panel-layout.js    | 56 ++++++++++---------
 2 files changed, 32 insertions(+), 28 deletions(-)

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 4b8e69abcfc2b..5d199e9ce680e 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
@@ -26,11 +26,11 @@
 
 .font-library-modal__tabpanel-layout {
 
-	main {
+	.font-library-modal__tabpanel-layout__main {
 		padding-bottom: $grid-unit-80;
 	}
 
-	footer {
+	.font-library-modal__tabpanel-layout__footer {
 		border-top: 1px solid $gray-300;
 		margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
 		padding: $grid-unit-20 $grid-unit-40;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js b/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js
index a7151c6e908d6..d2adb542af2a6 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js
@@ -22,32 +22,36 @@ function TabPanelLayout( {
 		<div className="font-library-modal__tabpanel-layout">
 			<Spacer margin={ 4 } />
 			<VStack spacing={ 4 } justify="space-between">
-				<header>
-					<VStack spacing={ 2 }>
-						<HStack justify="flex-start">
-							{ !! handleBack && (
-								<Button
-									variant="tertiary"
-									onClick={ handleBack }
-									icon={ chevronLeft }
-									size="small"
-								/>
-							) }
-							{ title && (
-								<Heading
-									level={ 2 }
-									size={ 13 }
-									className="edit-site-global-styles-header"
-								>
-									{ title }
-								</Heading>
-							) }
-						</HStack>
-						{ description && <Text>{ description }</Text> }
-					</VStack>
-				</header>
-				<main>{ children }</main>
-				{ footer && <footer>{ footer }</footer> }
+				<VStack spacing={ 2 }>
+					<HStack justify="flex-start">
+						{ !! handleBack && (
+							<Button
+								variant="tertiary"
+								onClick={ handleBack }
+								icon={ chevronLeft }
+								size="small"
+							/>
+						) }
+						{ title && (
+							<Heading
+								level={ 2 }
+								size={ 13 }
+								className="edit-site-global-styles-header"
+							>
+								{ title }
+							</Heading>
+						) }
+					</HStack>
+					{ description && <Text>{ description }</Text> }
+				</VStack>
+				<div className="font-library-modal__tabpanel-layout__main">
+					{ children }
+				</div>
+				{ footer && (
+					<div className="font-library-modal__tabpanel-layout__footer">
+						{ footer }
+					</div>
+				) }
 			</VStack>
 		</div>
 	);