From 503e4b60f865f81bee4aae15f0fbf04b577655b6 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Fri, 1 Oct 2021 09:07:28 -0700
Subject: [PATCH 1/5] Hide horizontal overflow in Post Editor preferences modal

---
 .../edit-post/src/components/preferences-modal/style.scss     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/edit-post/src/components/preferences-modal/style.scss b/packages/edit-post/src/components/preferences-modal/style.scss
index 2fbae2cbfa263c..97aed1f8b5f1c7 100644
--- a/packages/edit-post/src/components/preferences-modal/style.scss
+++ b/packages/edit-post/src/components/preferences-modal/style.scss
@@ -14,10 +14,12 @@ $vertical-tabs-width: 160px;
 		height: 70%;
 	}
 
-	// Clears spacing to flush fit the navigation component to the modal edges.
+	// Clears spacing to flush fit the navigator component to the modal edges.
 	@media (max-width: #{ ($break-medium - 1) }) {
 		.components-modal__content {
 			padding: 0;
+			// Prevents horizontal overflow from showing scrollbars.
+			overflow-x: hidden;
 
 			&::before {
 				content: none;

From c9b5bb057ad42405e253e6c230a723c390b58645 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Fri, 1 Oct 2021 09:18:37 -0700
Subject: [PATCH 2/5] Hide horizontal overflow in global styles sidebar

---
 packages/edit-site/src/components/sidebar/style.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
index b74ba0b9370276..0dddc6d4a2ccff 100644
--- a/packages/edit-site/src/components/sidebar/style.scss
+++ b/packages/edit-site/src/components/sidebar/style.scss
@@ -17,6 +17,12 @@
 	}
 }
 
+.edit-site-global-styles-sidebar {
+	> .components-panel {
+		overflow-x: hidden;
+	}
+}
+
 .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
 	margin-left: 0;
 }

From cdee056117822b12c60e64c66a485588f06f2d69 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Fri, 1 Oct 2021 09:38:12 -0700
Subject: [PATCH 3/5] =?UTF-8?q?Hide=20horizontal=20overflow=20in=20the=20N?=
 =?UTF-8?q?avigator=20component=E2=80=99s=20story?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/src/navigator/stories/index.js | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/navigator/stories/index.js b/packages/components/src/navigator/stories/index.js
index 42a5a639e6e671..c0bb3f02733a5a 100644
--- a/packages/components/src/navigator/stories/index.js
+++ b/packages/components/src/navigator/stories/index.js
@@ -20,21 +20,29 @@ function NavigatorButton( { path, isBack = false, ...props } ) {
 }
 
 const MyNavigation = () => (
-	<NavigatorProvider initialPath="/">
-		<NavigatorScreen path="/">
-			<p>This is the home screen.</p>
-			<NavigatorButton isPrimary path="/child">
-				Navigate to child screen.
-			</NavigatorButton>
-		</NavigatorScreen>
+	<div style={ { 'overflow-x': 'hidden' } }>
+		<NavigatorProvider initialPath="/">
+			<NavigatorScreen path="/">
+				<p>This is the home screen.</p>
+				<NavigatorButton isPrimary path="/child">
+					Navigate to child screen.
+				</NavigatorButton>
+			</NavigatorScreen>
 
-		<NavigatorScreen path="/child">
-			<p>This is the child screen.</p>
-			<NavigatorButton isPrimary path="/" isBack>
-				Go back
-			</NavigatorButton>
-		</NavigatorScreen>
-	</NavigatorProvider>
+			<NavigatorScreen path="/child">
+				<p>This is the child screen.</p>
+				<NavigatorButton
+					isPrimary
+					path="/"
+					isBack
+					style={ { position: 'sticky', top: '5px' } }
+				>
+					Go back
+				</NavigatorButton>
+				<div style={ { height: '200vh', background: 'papayawhip' } } />
+			</NavigatorScreen>
+		</NavigatorProvider>
+	</div>
 );
 
 export const _default = () => {

From 942cffa86ae620cedbd5a899331eadda47d877bf Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Fri, 1 Oct 2021 09:40:44 -0700
Subject: [PATCH 4/5] Remove outdated styling for Post Editor preferences modal

---
 .../components/preferences-modal/style.scss   | 40 -------------------
 1 file changed, 40 deletions(-)

diff --git a/packages/edit-post/src/components/preferences-modal/style.scss b/packages/edit-post/src/components/preferences-modal/style.scss
index 97aed1f8b5f1c7..2c6d35fc1bc6ce 100644
--- a/packages/edit-post/src/components/preferences-modal/style.scss
+++ b/packages/edit-post/src/components/preferences-modal/style.scss
@@ -27,46 +27,6 @@ $vertical-tabs-width: 160px;
 		}
 	}
 
-	.components-navigation {
-		padding: 0;
-		max-height: 100%;
-		overflow-y: auto;
-		color: $black;
-
-		> * {
-			// Matches spacing cleared from the modal content element.
-			padding: $grid-unit-30 $grid-unit-40;
-		}
-
-		.components-navigation__menu {
-			margin: 0;
-
-			.components-navigation__item {
-				& > button {
-					padding: 3px $grid-unit-20;
-					height: $grid-unit-60;
-					// Aligns button text instead of button box.
-					margin: 0 #{-$grid-unit-20};
-					width: calc(#{$grid-unit-40} + 100%);
-					&:focus {
-						font-weight: 500;
-					}
-				}
-			}
-			.components-navigation__menu-title-heading {
-				border-bottom: 1px solid $gray-300;
-				padding-left: 0;
-				padding-right: 0;
-			}
-			.components-navigation__back-button {
-				padding-left: 0;
-			}
-			.edit-post-preferences-modal__custom-fields-confirmation-button {
-				width: auto;
-			}
-		}
-	}
-
 	.edit-post-preferences__tabs {
 		.components-tab-panel__tabs {
 			position: absolute;

From 39e9f63a25a38169c38000221f29d4517055f449 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Fri, 1 Oct 2021 20:24:34 -0700
Subject: [PATCH 5/5] In Post Editor preferences modal, put Card inside
 NavigtorScreen and use size prop for improved content alignment

---
 .../src/components/preferences-modal/index.js | 38 ++++++++++---------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
index 383b9604013ff0..838d241c4495ae 100644
--- a/packages/edit-post/src/components/preferences-modal/index.js
+++ b/packages/edit-post/src/components/preferences-modal/index.js
@@ -325,10 +325,10 @@ export default function PreferencesModal() {
 		);
 	} else {
 		modalContent = (
-			<Card isBorderless>
-				<CardBody>
-					<NavigatorProvider initialPath="/">
-						<NavigatorScreen path="/">
+			<NavigatorProvider initialPath="/">
+				<NavigatorScreen path="/">
+					<Card isBorderless size="small">
+						<CardBody>
 							<ItemGroup>
 								{ tabs.map( ( tab ) => {
 									return (
@@ -358,13 +358,17 @@ export default function PreferencesModal() {
 									);
 								} ) }
 							</ItemGroup>
-						</NavigatorScreen>
-						{ sections.map( ( section ) => {
-							return (
-								<NavigatorScreen
-									key={ `${ section.name }-menu` }
-									path={ section.name }
-								>
+						</CardBody>
+					</Card>
+				</NavigatorScreen>
+				{ sections.map( ( section ) => {
+					return (
+						<NavigatorScreen
+							key={ `${ section.name }-menu` }
+							path={ section.name }
+						>
+							<Card isBorderless size="large">
+								<CardBody>
 									<NavigationButton
 										path="/"
 										icon={
@@ -376,12 +380,12 @@ export default function PreferencesModal() {
 									</NavigationButton>
 									<h2>{ section.tabLabel }</h2>
 									{ section.content }
-								</NavigatorScreen>
-							);
-						} ) }
-					</NavigatorProvider>
-				</CardBody>
-			</Card>
+								</CardBody>
+							</Card>
+						</NavigatorScreen>
+					);
+				} ) }
+			</NavigatorProvider>
 		);
 	}
 	return (