Newsletter: Move admin notices and JITMs below page header (#47714)

* Newsletter: Move admin notices and JITMs below page header

Move GlobalNotices to render before the form content instead of after it,
and add a #jp-admin-notices container for JITM injection. This follows
the same pattern established in PR #47558 for My Jetpack, Social, and
Search.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Newsletter: Use CSS logical properties for JITM card margins

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Add changelog for newsletter admin notices fix

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: vianasw

projects/packages/newsletter/changelog/fix-newsletter-admin-notices-below-header

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Move admin notices and JITMs below the page header instead of rendering inside it

projects/packages/newsletter/src/settings/index.tsx

@@ -388,6 +388,12 @@ function NewsletterSettingsApp(): JSX.Element | null {
 				'jetpack-newsletter'
 			) }
 		>
+			<GlobalNotices />
+			<Container horizontalSpacing={ 0 }>
+				<Col>
+					<div id="jp-admin-notices" className="newsletter-jitm-card" />
+				</Col>
+			</Container>
 			<Container horizontalSpacing={ 3 }>
 				<Col>
 					<Stack gap="md" direction="column" className="newsletter-settings">
@@ -456,8 +462,6 @@ function NewsletterSettingsApp(): JSX.Element | null {
 							</Stack>
 						</Disabled>
 					</Stack>
-
-					<GlobalNotices />
 				</Col>
 			</Container>
 		</AdminPage>

projects/packages/newsletter/src/settings/style.scss

@@ -10,6 +10,14 @@
 	text-align: right;
 }
 
+.newsletter-jitm-card {
+
+	.jitm-card {
+		margin-inline-end: 0;
+		margin-block: 1.5rem;
+	}
+}
+
 .newsletter-settings {
 	max-width: 660px; /* MSD and future JP settings pages are 660px wide */
 	margin-inline: auto;