From 844a8041d210ac6e08595a51f32fff4ea498e107 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Mon, 26 Jun 2023 09:22:14 +0900
Subject: [PATCH] Library: Fix misalignment of description in custom template
 parts (#51868)

---
 .../style.scss                                | 25 ++++++++++++++++
 .../style.scss                                | 30 +++++++++----------
 packages/edit-site/src/style.scss             |  1 +
 3 files changed, 41 insertions(+), 15 deletions(-)
 create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss
new file mode 100644
index 0000000000000..469451d8943dc
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss
@@ -0,0 +1,25 @@
+.edit-site-sidebar-navigation-screen-pattern__added-by-description {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-top: $grid-unit-30;
+}
+
+.edit-site-sidebar-navigation-screen-pattern__added-by-description-author {
+	display: inline-flex;
+	align-items: center;
+
+	img {
+		border-radius: $grid-unit-15;
+	}
+
+	svg {
+		fill: $gray-600;
+	}
+}
+
+.edit-site-sidebar-navigation-screen-pattern__added-by-description-author-icon {
+	width: 24px;
+	height: 24px;
+	margin-right: $grid-unit-10;
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss
index 8b1cf5bbf456c..20b39d8e89817 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss
@@ -3,27 +3,27 @@
 	align-items: center;
 	justify-content: space-between;
 	margin-top: $grid-unit-30;
+}
 
-	&-author {
-		display: inline-flex;
-		align-items: center;
-
-		img {
-			border-radius: $grid-unit-15;
-		}
+.edit-site-sidebar-navigation-screen-template__added-by-description-author {
+	display: inline-flex;
+	align-items: center;
 
-		svg {
-			fill: $gray-600;
-		}
+	img {
+		border-radius: $grid-unit-15;
+	}
 
-		&-icon {
-			width: 24px;
-			height: 24px;
-			margin-right: $grid-unit-10;
-		}
+	svg {
+		fill: $gray-600;
 	}
 }
 
+.edit-site-sidebar-navigation-screen-template__added-by-description-author-icon {
+	width: 24px;
+	height: 24px;
+	margin-right: $grid-unit-10;
+}
+
 .edit-site-sidebar-navigation-screen-template__template-area-button {
 	color: $white;
 	display: flex;
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 5e78005ea21d6..324f1ab4bc0ec 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -37,6 +37,7 @@
 @import "./components/sidebar-navigation-screen-navigation-menu/style.scss";
 @import "./components/sidebar-navigation-screen-page/style.scss";
 @import "components/sidebar-navigation-screen-details-panel/style.scss";
+@import "./components/sidebar-navigation-screen-pattern/style.scss";
 @import "./components/sidebar-navigation-screen-template/style.scss";
 @import "./components/site-hub/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menus/style.scss";