From 1e92a58553d65ceb8b75a0307a3e63199dd904be Mon Sep 17 00:00:00 2001
From: im3dabasia <eshaan.dabasiya@rtcamp.com>
Date: Mon, 2 Dec 2024 16:49:10 +0530
Subject: [PATCH] feat: Add horizontal negative margins for navigation, pages,
 templates and patterns in site editor

---
 packages/edit-site/src/components/sidebar-dataviews/index.js | 2 +-
 .../edit-site/src/components/sidebar-dataviews/style.scss    | 5 +++++
 .../sidebar-navigation-screen-navigation-menus/index.js      | 2 +-
 .../sidebar-navigation-screen-navigation-menus/style.scss    | 5 +++++
 .../components/sidebar-navigation-screen-patterns/style.scss | 2 ++
 .../sidebar-navigation-screen-templates-browse/content.js    | 2 +-
 .../sidebar-navigation-screen-templates-browse/style.scss    | 4 ++++
 packages/edit-site/src/style.scss                            | 1 +
 8 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/style.scss

diff --git a/packages/edit-site/src/components/sidebar-dataviews/index.js b/packages/edit-site/src/components/sidebar-dataviews/index.js
index 410767650c6f36..312bf43d6df657 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/index.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/index.js
@@ -26,7 +26,7 @@ export default function DataViewsSidebarContent( { postType } ) {
 
 	return (
 		<>
-			<ItemGroup>
+			<ItemGroup className="edit-site-sidebar-dataviews">
 				{ defaultViews.map( ( dataview ) => {
 					return (
 						<DataViewItem
diff --git a/packages/edit-site/src/components/sidebar-dataviews/style.scss b/packages/edit-site/src/components/sidebar-dataviews/style.scss
index 14e6bf1d03fca8..70137d304de8c7 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/style.scss
+++ b/packages/edit-site/src/components/sidebar-dataviews/style.scss
@@ -27,3 +27,8 @@
 		color: $white;
 	}
 }
+
+.edit-site-sidebar-dataviews {
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
index dc3dd879611843..1fc7d61318c57a 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
@@ -116,7 +116,7 @@ export default function SidebarNavigationScreenNavigationMenus( { backPath } ) {
 
 	return (
 		<SidebarNavigationScreenWrapper backPath={ backPath }>
-			<ItemGroup>
+			<ItemGroup className="edit-site-sidebar-navigation-screen-navigation-menus">
 				{ navigationMenus?.map( ( { id, title, status }, index ) => (
 					<NavMenuItem
 						postId={ id }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
index 544aad5075aec0..fce70b856a44a9 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
@@ -46,3 +46,8 @@
 .edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor {
 	display: none;
 }
+
+.edit-site-sidebar-navigation-screen-navigation-menus {
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss
index 19885eb3baf2cb..fd50d757f276b1 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss
@@ -1,5 +1,7 @@
 .edit-site-sidebar-navigation-screen-patterns__group {
 	margin-bottom: $grid-unit-30;
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
 
 	&:last-of-type {
 		border-bottom: 0;
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js
index 5d3819eac0ee3c..8c2cb19ab17368 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js
@@ -56,7 +56,7 @@ export default function DataviewsTemplatesSidebarContent() {
 	}, [ records ] );
 
 	return (
-		<ItemGroup>
+		<ItemGroup className="edit-site-sidebar-navigation-screen-templates-browse">
 			<SidebarNavigationItem
 				to="/template"
 				icon={ layout }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/style.scss
new file mode 100644
index 00000000000000..8846d5a4b47b4d
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/style.scss
@@ -0,0 +1,4 @@
+.edit-site-sidebar-navigation-screen-templates-browse {
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+}
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index dce945a48ee700..0ac877696b8d43 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -35,6 +35,7 @@
 @import "./components/pagination/style.scss";
 @import "./components/global-styles/variations/style.scss";
 @import "./components/sidebar-global-styles-wrapper/style.scss";
+@import "./components/sidebar-navigation-screen-templates-browse/style.scss";
 
 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
 ::view-transition-image-pair(root) {