Automattic · vianasw · Mar 12, 2026 · Mar 12, 2026 · Mar 12, 2026 · Mar 12, 2026
diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx
@@ -189,30 +189,35 @@ export default function MyJetpackScreen() {
 			<h1 className="screen-reader-text">{ __( 'My Jetpack', 'jetpack-my-jetpack' ) }</h1>
 
 			<IDCModal />
-			<GlobalNotices />
-			{ ! isNewUser && (
-				<Container horizontalSpacing={ 0 }>
-					<Col>
-						<div id="jp-admin-notices" className="my-jetpack-jitm-card" />
-					</Col>
-				</Container>
-			) }
-			{ noticeMessage && (
-				<Container horizontalSpacing={ 3 } horizontalGap={ 3 }>
-					<Col>
-						<GlobalNotice
-							message={ noticeMessage }
-							title={ noticeTitle }
-							options={ noticeOptions }
-						/>
-					</Col>
-				</Container>
-			) }
 			{ isSectionVisible && userIsAdmin && <EvaluationRecommendations /> }
 
 			{ isRedirectingFromOnboarding && <OnboardingTour /> }
 
-			<MyJetpackTabPanel />
+			<MyJetpackTabPanel
+				beforeContent={
+					<>
+						<GlobalNotices />
+						{ ! isNewUser && (
+							<Container horizontalSpacing={ 0 }>
+								<Col>
+									<div id="jp-admin-notices" className="my-jetpack-jitm-card" />
+								</Col>
+							</Container>
+						) }
+						{ noticeMessage && (
+							<Container horizontalSpacing={ 3 } horizontalGap={ 3 }>
+								<Col>
+									<GlobalNotice
+										message={ noticeMessage }
+										title={ noticeTitle }
+										options={ noticeOptions }
+									/>
+								</Col>
+							</Container>
+						) }
+					</>
+				}
+			/>
 		</AdminPage>
 	);
 }
diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/index.tsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/index.tsx
@@ -5,17 +5,21 @@ import { useNavigate, useParams } from 'react-router';
 import useAnalytics from '../../hooks/use-analytics';
 import useIsJetpackUserNew from '../../hooks/use-is-jetpack-user-new';
 import { MY_JETPACK_SECTION_OVERVIEW } from './constants';
+import { FullWidthSeparator } from './full-width-separator';
 import styles from './styles.module.scss';
 import { TabContent } from './tab-content';
 import { MyJetpackSection } from './types';
 import { getMyJetpackSections, isValidMyJetpackSection } from './utils';
+import type { ReactNode } from 'react';
 
 /**
  * My Jetpack Tab panel component.
  *
+ * @param {object}    root0               - Component props.
+ * @param {ReactNode} root0.beforeContent - Content to render between the tab separator and tab content.
  * @return The rendered component.
  */
-export function MyJetpackTabPanel() {
+export function MyJetpackTabPanel( { beforeContent }: { beforeContent?: ReactNode } ) {
 	const params = useParams();
 	const navigate = useNavigate();
 	const { recordEvent } = useAnalytics();
@@ -55,9 +59,18 @@ export function MyJetpackTabPanel() {
 		[ navigate, params.section, recordEvent, isNewUser ]
 	);
 
-	const tabRenderer = useCallback( ( tab: { name: string } ) => {
-		return <TabContent name={ tab.name as MyJetpackSection } />;
-	}, [] );
+	const tabRenderer = useCallback(
+		( tab: { name: string } ) => {
+			return (
+				<>
+					<FullWidthSeparator />
+					{ beforeContent }
+					<TabContent name={ tab.name as MyJetpackSection } />
+				</>
+			);
+		},
+		[ beforeContent ]
+	);
 
 	// Handle external navigation (URL changes not from tab clicks)
 	useEffect( () => {

diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/tab-content.tsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/tab-content.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import { FullWidthSeparator } from './full-width-separator';
 import { HelpContent } from './help/content';
 import { OverviewContent } from './overview/content';
 import { ProductsContent } from './products/content';
@@ -33,7 +32,6 @@ export function TabContent( { name }: TabContentProps ) {
 
 	return (
 		<div className={ styles[ 'my-jetpack-tab-panel-inner' ] }>
-			<FullWidthSeparator />
 			<div className={ clsx( styles[ 'tab-content-wrapper' ] ) }>
 				<ContentComponent />
 			</div>

diff --git a/projects/packages/my-jetpack/changelog/fix-admin-notices-inside-header b/projects/packages/my-jetpack/changelog/fix-admin-notices-inside-header
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Move admin notices and JITMs below the tab bar instead of rendering inside the page header.
diff --git a/projects/packages/publicize/_inc/components/admin-page/header/index.js b/projects/packages/publicize/_inc/components/admin-page/header/index.js
@@ -1,5 +1,4 @@
 import { Button, Col, Container, H3 } from '@automattic/jetpack-components';
-import { ConnectionError, useConnectionErrorNotice } from '@automattic/jetpack-connection';
 import { getAdminUrl } from '@automattic/jetpack-script-data';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -15,41 +14,27 @@ const Header = () => {
 		};
 	} );
 
-	const { hasConnectionError } = useConnectionErrorNotice();
-
 	const { openConnectionsModal } = useDispatch( socialStore );
 
 	return (
-		<>
-			<Container horizontalSpacing={ 0 }>
-				{ hasConnectionError && (
-					<Col className={ styles[ 'connection-error-col' ] }>
-						<ConnectionError />
-					</Col>
-				) }
-				<Col>
-					<div id="jp-admin-notices" className="jetpack-social-jitm-card" />
-				</Col>
-			</Container>
-			<Container horizontalSpacing={ 3 } horizontalGap={ 3 } className={ styles.container }>
-				<Col sm={ 4 } md={ 4 } lg={ 5 }>
-					<H3 mt={ 2 }>{ __( 'Write once, post everywhere', 'jetpack-publicize-pkg' ) }</H3>
-					<div className={ styles.actions }>
-						{ isModuleEnabled && ! hasConnections && (
-							<Button onClick={ openConnectionsModal }>
-								{ __( 'Connect accounts', 'jetpack-publicize-pkg' ) }
-							</Button>
-						) }
-						<Button
-							href={ getAdminUrl( 'post-new.php' ) }
-							variant={ hasConnections ? 'primary' : 'secondary' }
-						>
-							{ __( 'Write a post', 'jetpack-publicize-pkg' ) }
+		<Container horizontalSpacing={ 3 } horizontalGap={ 3 } className={ styles.container }>
+			<Col sm={ 4 } md={ 4 } lg={ 5 }>
+				<H3 mt={ 2 }>{ __( 'Write once, post everywhere', 'jetpack-publicize-pkg' ) }</H3>
+				<div className={ styles.actions }>
+					{ isModuleEnabled && ! hasConnections && (
+						<Button onClick={ openConnectionsModal }>
+							{ __( 'Connect accounts', 'jetpack-publicize-pkg' ) }
 						</Button>
-					</div>
-				</Col>
-			</Container>
-		</>
+					) }
+					<Button
+						href={ getAdminUrl( 'post-new.php' ) }
+						variant={ hasConnections ? 'primary' : 'secondary' }
+					>
+						{ __( 'Write a post', 'jetpack-publicize-pkg' ) }
+					</Button>
+				</div>
+			</Col>
+		</Container>
 	);
 };
 

diff --git a/projects/packages/publicize/_inc/components/admin-page/header/styles.module.scss b/projects/packages/publicize/_inc/components/admin-page/header/styles.module.scss
@@ -57,10 +57,6 @@
 	}
 }
 
-.connection-error-col {
-	margin-top: 25px;
-}
-
 .bar-wrapper {
 	margin-bottom: var(--spacing-base);
 

diff --git a/projects/packages/publicize/_inc/components/admin-page/index.tsx b/projects/packages/publicize/_inc/components/admin-page/index.tsx
@@ -6,7 +6,11 @@ import {
 	Col,
 	GlobalNotices,
 } from '@automattic/jetpack-components';
-import { useConnection } from '@automattic/jetpack-connection';
+import {
+	ConnectionError,
+	useConnection,
+	useConnectionErrorNotice,
+} from '@automattic/jetpack-connection';
 import {
 	getMyJetpackUrl,
 	isJetpackSelfHostedSite,
@@ -25,7 +29,7 @@ import ConnectionScreen from './connection-screen';
 import Header from './header';
 import InfoSection from './info-section';
 import PricingPage from './pricing-page';
-import './styles.module.scss';
+import styles from './styles.module.scss';
 import SupportSection from './support-section';
 import SocialImageGeneratorToggle from './toggles/social-image-generator-toggle';
 import SocialModuleToggle from './toggles/social-module-toggle';
@@ -38,6 +42,7 @@ export const SocialAdminPage = () => {
 	const isJetpackSite = isJetpackSelfHostedSite();
 
 	const { isUserConnected, isRegistered } = useConnection();
+	const { hasConnectionError } = useConnectionErrorNotice();
 	const showConnectionCard = ! isSimple && ( ! isRegistered || ! isUserConnected );
 
 	const [ pricingPageDismissed, setPricingPageDismissed ] = useState( false );
@@ -101,6 +106,16 @@ export const SocialAdminPage = () => {
 			<GlobalNotices />
 			{ isJetpackSite && ! hasSocialPaidFeatures() && showPricingPage && ! pricingPageDismissed ? (
 				<AdminSectionHero>
+					<Container horizontalSpacing={ 0 }>
+						{ hasConnectionError && (
+							<Col className={ styles[ 'connection-error-col' ] }>
+								<ConnectionError />
+							</Col>
+						) }
+						<Col>
+							<div id="jp-admin-notices" className="jetpack-social-jitm-card" />
+						</Col>
+					</Container>
 					<Container horizontalSpacing={ 3 } horizontalGap={ 3 }>
 						<Col>
 							<PricingPage onDismiss={ onPricingPageDismiss } />
@@ -112,6 +127,16 @@ export const SocialAdminPage = () => {
 					<AdminSectionHero>
 						<Header />
 					</AdminSectionHero>
+					<Container horizontalSpacing={ 0 }>
+						{ hasConnectionError && (
+							<Col className={ styles[ 'connection-error-col' ] }>
+								<ConnectionError />
+							</Col>
+						) }
+						<Col>
+							<div id="jp-admin-notices" className="jetpack-social-jitm-card" />
+						</Col>
+					</Container>
 					<AdminSection>
 						<SocialModuleToggle />
 						{ canManageOptions && (

diff --git a/projects/packages/publicize/_inc/components/admin-page/styles.module.scss b/projects/packages/publicize/_inc/components/admin-page/styles.module.scss
@@ -23,3 +23,7 @@
 .notice {
 	grid-column: 1 / -1;
 }
+
+.connection-error-col {
+	margin-top: 25px;
+}
diff --git a/projects/packages/publicize/changelog/fix-admin-notices-inside-header b/projects/packages/publicize/changelog/fix-admin-notices-inside-header
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Move admin notices and JITMs below the page header instead of rendering inside it.
diff --git a/projects/packages/search/changelog/fix-admin-notices-inside-header b/projects/packages/search/changelog/fix-admin-notices-inside-header
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Move admin notices and JITMs below the page header instead of rendering inside it.
diff --git a/projects/packages/search/src/dashboard/components/pages/dashboard-page.jsx b/projects/packages/search/src/dashboard/components/pages/dashboard-page.jsx
@@ -107,6 +107,8 @@ export default function DashboardPage( { isLoading = false } ) {
 
 	return (
 		<>
+			{ /* Always in the DOM so JITM JS finds it immediately (Path A). */ }
+			<div id="jp-admin-notices" className="jetpack-search-jitm-card" />
 			{ isPageLoading && <Loading /> }
 			{ ! isPageLoading && (
 				<div className="jp-search-dashboard-page">
@@ -126,20 +128,17 @@ export default function DashboardPage( { isLoading = false } ) {
 						className="uses-new-admin-ui"
 						showFooter={ false }
 					>
-						<Container horizontalSpacing={ 0 } horizontalGap={ 3 }>
-							{ hasConnectionError && (
-								<Col lg={ 12 } md={ 12 } sm={ 12 }>
-									<ConnectionError />
-								</Col>
-							) }
-							<Col>
-								<div id="jp-admin-notices" className="jetpack-search-jitm-card" />
-							</Col>
-						</Container>
 						<MockedSearchInterface
 							supportsInstantSearch={ supportsInstantSearch }
 							supportsOnlyClassicSearch={ supportsOnlyClassicSearch }
 						/>
+						{ hasConnectionError && (
+							<Container horizontalSpacing={ 0 } horizontalGap={ 3 }>
+								<Col lg={ 12 } md={ 12 } sm={ 12 }>
+									<ConnectionError />
+								</Col>
+							</Container>
+						) }
 						{ isNewPricing && supportsInstantSearch && (
 							<PlanInfo
 								hasIndex={ postCount !== 0 }