From 7078423c229afbee6bc150260bc78ce03d58c824 Mon Sep 17 00:00:00 2001
From: Todd Wright <todd.wright@automattic.com>
Date: Wed, 2 Sep 2026 14:44:21 +1000
Subject: [PATCH 1/5] AdminPage: Give header-less pages a scroll surface under
 the admin page layout

The jetpack-admin-page-layout mixin pins the content column to the viewport and expects a scrollable middle inside admin-ui's Page. An AdminPage with no title or breadcrumbs skips that Page, so its content had no scroll surface and the fixed column clipped everything below the fold. My Jetpack's #/connection screen hit this: the "Connect your user account" button sat out of reach on short viewports.

Add a stable jp-admin-page__content class to the header-less content wrapper and have the mixin treat it as the scrollable middle. Tests lock both class hooks in place.
---
 .../base-styles/admin-page-layout.scss        | 21 ++++++++++
 .../fix-admin-page-header-less-scroll-surface |  4 ++
 .../fix-admin-page-header-less-scroll-surface |  4 ++
 .../components/admin-page/index.tsx           |  3 +-
 .../components/admin-page/test/component.tsx  | 42 +++++++++++++++++++
 .../fix-admin-page-header-less-scroll-surface |  4 ++
 6 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 projects/js-packages/base-styles/changelog/fix-admin-page-header-less-scroll-surface
 create mode 100644 projects/js-packages/components/changelog/fix-admin-page-header-less-scroll-surface
 create mode 100644 projects/js-packages/components/components/admin-page/test/component.tsx
 create mode 100644 projects/packages/my-jetpack/changelog/fix-admin-page-header-less-scroll-surface

diff --git a/projects/js-packages/base-styles/admin-page-layout.scss b/projects/js-packages/base-styles/admin-page-layout.scss
index 2213d16093b4..aa5c8196313d 100644
--- a/projects/js-packages/base-styles/admin-page-layout.scss
+++ b/projects/js-packages/base-styles/admin-page-layout.scss
@@ -287,6 +287,27 @@ $jp-breakpoint-mobile: 782px;
 		}
 	}
 
+	// ── <AdminPage> without a title or breadcrumbs ───────────────────
+	// That path skips admin-ui's <Page>, so there is no `.jp-admin-page__page`.
+	// Its content wrapper carries `jp-admin-page__content` instead; make it
+	// the scrollable middle, or the fixed column clips everything below the fold.
+	.jp-admin-page > .jp-admin-page__content {
+		flex: 1 1 auto;
+		min-height: 0;
+		min-width: 0;
+		overflow: auto;
+		display: flex;
+		flex-direction: column;
+
+		> * {
+			flex: 1 1 auto;
+			min-height: 0;
+			min-width: 0;
+			display: flex;
+			flex-direction: column;
+		}
+	}
+
 	// ── <JetpackFooter> pinned at the bottom ─────────────────────────
 	.jetpack-footer {
 		flex-shrink: 0;
diff --git a/projects/js-packages/base-styles/changelog/fix-admin-page-header-less-scroll-surface b/projects/js-packages/base-styles/changelog/fix-admin-page-header-less-scroll-surface
new file mode 100644
index 000000000000..34175f2fa2a9
--- /dev/null
+++ b/projects/js-packages/base-styles/changelog/fix-admin-page-header-less-scroll-surface
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Admin page layout: make the content of header-less AdminPage screens scroll instead of being clipped by the fixed content column.
diff --git a/projects/js-packages/components/changelog/fix-admin-page-header-less-scroll-surface b/projects/js-packages/components/changelog/fix-admin-page-header-less-scroll-surface
new file mode 100644
index 000000000000..069481771fd7
--- /dev/null
+++ b/projects/js-packages/components/changelog/fix-admin-page-header-less-scroll-surface
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+AdminPage: add a stable `jp-admin-page__content` class to the content wrapper of header-less pages so the shared admin page layout can make it scrollable.
diff --git a/projects/js-packages/components/components/admin-page/index.tsx b/projects/js-packages/components/components/admin-page/index.tsx
index 4fa00a0342ee..c8b935f06f20 100644
--- a/projects/js-packages/components/components/admin-page/index.tsx
+++ b/projects/js-packages/components/components/admin-page/index.tsx
@@ -120,7 +120,8 @@ const AdminPage: FC< AdminPageProps > = ( {
 					</Col>
 				</Container>
 			) }
-			<Container fluid horizontalSpacing={ 0 }>
+			{ /* `jp-admin-page__content` is a stable hook for `jetpack-admin-page-layout`. Do not rename. */ }
+			<Container fluid horizontalSpacing={ 0 } className="jp-admin-page__content">
 				<Col>{ children }</Col>
 			</Container>
 			{ showFooter && <JetpackFooter menu={ optionalMenuItems } /> }
diff --git a/projects/js-packages/components/components/admin-page/test/component.tsx b/projects/js-packages/components/components/admin-page/test/component.tsx
new file mode 100644
index 000000000000..221d86bd7a74
--- /dev/null
+++ b/projects/js-packages/components/components/admin-page/test/component.tsx
@@ -0,0 +1,42 @@
+/* eslint-disable testing-library/no-node-access -- these tests check class hooks
+   that the `jetpack-admin-page-layout` mixin selects on. */
+import { render, screen } from '@testing-library/react';
+import AdminPage from '../index.tsx';
+
+describe( 'AdminPage', () => {
+	it( 'wraps children in the scrollable content hook when there is no header', () => {
+		render(
+			<AdminPage showHeader={ false }>
+				<p>Page body</p>
+			</AdminPage>
+		);
+
+		const content = screen.getByText( 'Page body' ).closest( '.jp-admin-page__content' );
+		expect( content ).not.toBeNull();
+		expect( content.parentElement ).toHaveClass( 'jp-admin-page' );
+	} );
+
+	it( 'wraps children in the scrollable content hook with the legacy header', () => {
+		render(
+			<AdminPage>
+				<p>Page body</p>
+			</AdminPage>
+		);
+
+		const content = screen.getByText( 'Page body' ).closest( '.jp-admin-page__content' );
+		expect( content ).not.toBeNull();
+		expect( content.parentElement ).toHaveClass( 'jp-admin-page' );
+	} );
+
+	it( 'renders the admin-ui page hook instead when a title is given', () => {
+		render(
+			<AdminPage title="Sample">
+				<p>Page body</p>
+			</AdminPage>
+		);
+
+		const body = screen.getByText( 'Page body' );
+		expect( body.closest( '.jp-admin-page__page' ) ).not.toBeNull();
+		expect( body.closest( '.jp-admin-page__content' ) ).toBeNull();
+	} );
+} );
diff --git a/projects/packages/my-jetpack/changelog/fix-admin-page-header-less-scroll-surface b/projects/packages/my-jetpack/changelog/fix-admin-page-header-less-scroll-surface
new file mode 100644
index 000000000000..eb12098c9d11
--- /dev/null
+++ b/projects/packages/my-jetpack/changelog/fix-admin-page-header-less-scroll-surface
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Connection screen: restore scrolling so the connect button is reachable on short viewports.

From daa4e4c2d610317a3a85ccac1a40a1fb48808357 Mon Sep 17 00:00:00 2001
From: Todd Wright <todd.wright@automattic.com>
Date: Wed, 2 Sep 2026 15:09:18 +1000
Subject: [PATCH 2/5] AdminPage: Address review on the scroll surface for pages
 without a title

Group the new content-hook selector with the existing scrollable-middle rule so the two cannot drift, and give the hook the same scrollbar-gutter as the title path in My Jetpack. Add a test that fails if the mixin stops selecting the hook, since jsdom cannot check layout. Backup's secondary-admin connection screen takes the same path and gets the same fix, so add its changelog entry. Rename "header-less" to "without a title or breadcrumbs", which is the real condition.
---
 .../base-styles/admin-page-layout.scss        | 25 ++++---------------
 .../fix-admin-page-header-less-scroll-surface |  2 +-
 .../fix-admin-page-header-less-scroll-surface |  2 +-
 .../components/admin-page/test/component.tsx  | 16 ++++++++++++
 .../fix-admin-page-header-less-scroll-surface |  4 +++
 .../my-jetpack/_inc/style.module.scss         |  3 ++-
 6 files changed, 29 insertions(+), 23 deletions(-)
 create mode 100644 projects/packages/backup/changelog/fix-admin-page-header-less-scroll-surface

diff --git a/projects/js-packages/base-styles/admin-page-layout.scss b/projects/js-packages/base-styles/admin-page-layout.scss
index aa5c8196313d..bf625e1f9c93 100644
--- a/projects/js-packages/base-styles/admin-page-layout.scss
+++ b/projects/js-packages/base-styles/admin-page-layout.scss
@@ -270,27 +270,12 @@ $jp-breakpoint-mobile: 782px;
 	// fill their bounded slot. Form-style pages keep working: their
 	// children stay content-sized (default `flex: 0 1 auto`) and any
 	// overflow still falls back to Container's `overflow: auto`.
-	.jp-admin-page__page > :not(:first-child):not(.jetpack-footer) {
-		flex: 1 1 auto;
-		min-height: 0;
-		min-width: 0;
-		overflow: auto;
-		display: flex;
-		flex-direction: column;
-
-		> * {
-			flex: 1 1 auto;
-			min-height: 0;
-			min-width: 0;
-			display: flex;
-			flex-direction: column;
-		}
-	}
 
-	// ── <AdminPage> without a title or breadcrumbs ───────────────────
-	// That path skips admin-ui's <Page>, so there is no `.jp-admin-page__page`.
-	// Its content wrapper carries `jp-admin-page__content` instead; make it
-	// the scrollable middle, or the fixed column clips everything below the fold.
+	// An <AdminPage> without a title or breadcrumbs skips admin-ui's <Page>,
+	// so there is no `.jp-admin-page__page`. Its content wrapper carries
+	// `jp-admin-page__content` instead and needs the same treatment, or the
+	// fixed column clips everything below the fold.
+	.jp-admin-page__page > :not(:first-child):not(.jetpack-footer),
 	.jp-admin-page > .jp-admin-page__content {
 		flex: 1 1 auto;
 		min-height: 0;
diff --git a/projects/js-packages/base-styles/changelog/fix-admin-page-header-less-scroll-surface b/projects/js-packages/base-styles/changelog/fix-admin-page-header-less-scroll-surface
index 34175f2fa2a9..73577259bceb 100644
--- a/projects/js-packages/base-styles/changelog/fix-admin-page-header-less-scroll-surface
+++ b/projects/js-packages/base-styles/changelog/fix-admin-page-header-less-scroll-surface
@@ -1,4 +1,4 @@
 Significance: patch
 Type: fixed
 
-Admin page layout: make the content of header-less AdminPage screens scroll instead of being clipped by the fixed content column.
+Admin page layout: make the content of AdminPage screens without a title or breadcrumbs scroll instead of being clipped by the fixed content column.
diff --git a/projects/js-packages/components/changelog/fix-admin-page-header-less-scroll-surface b/projects/js-packages/components/changelog/fix-admin-page-header-less-scroll-surface
index 069481771fd7..883f0bc92864 100644
--- a/projects/js-packages/components/changelog/fix-admin-page-header-less-scroll-surface
+++ b/projects/js-packages/components/changelog/fix-admin-page-header-less-scroll-surface
@@ -1,4 +1,4 @@
 Significance: patch
 Type: fixed
 
-AdminPage: add a stable `jp-admin-page__content` class to the content wrapper of header-less pages so the shared admin page layout can make it scrollable.
+AdminPage: add a stable `jp-admin-page__content` class to the content wrapper of pages without a title or breadcrumbs so the shared admin page layout can make it scrollable.
diff --git a/projects/js-packages/components/components/admin-page/test/component.tsx b/projects/js-packages/components/components/admin-page/test/component.tsx
index 221d86bd7a74..ad5dea776fb1 100644
--- a/projects/js-packages/components/components/admin-page/test/component.tsx
+++ b/projects/js-packages/components/components/admin-page/test/component.tsx
@@ -1,9 +1,25 @@
 /* eslint-disable testing-library/no-node-access -- these tests check class hooks
    that the `jetpack-admin-page-layout` mixin selects on. */
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
 import { render, screen } from '@testing-library/react';
 import AdminPage from '../index.tsx';
 
 describe( 'AdminPage', () => {
+	it( 'keeps the content hook in step with the admin page layout mixin', () => {
+		// jsdom does no layout, so the only automated guard is that the mixin
+		// still selects the class this component renders.
+		const mixinPath = fileURLToPath(
+			new URL(
+				'../../../node_modules/@automattic/jetpack-base-styles/admin-page-layout.scss',
+				import.meta.url
+			)
+		);
+		expect( readFileSync( mixinPath, 'utf8' ) ).toContain(
+			'.jp-admin-page > .jp-admin-page__content'
+		);
+	} );
+
 	it( 'wraps children in the scrollable content hook when there is no header', () => {
 		render(
 			<AdminPage showHeader={ false }>
diff --git a/projects/packages/backup/changelog/fix-admin-page-header-less-scroll-surface b/projects/packages/backup/changelog/fix-admin-page-header-less-scroll-surface
new file mode 100644
index 000000000000..75d6d3b0a21e
--- /dev/null
+++ b/projects/packages/backup/changelog/fix-admin-page-header-less-scroll-surface
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Secondary admin connection screen: restore scrolling so the connect button is reachable on short viewports.
diff --git a/projects/packages/my-jetpack/_inc/style.module.scss b/projects/packages/my-jetpack/_inc/style.module.scss
index 26b2d3bc3bcc..b42715889158 100644
--- a/projects/packages/my-jetpack/_inc/style.module.scss
+++ b/projects/packages/my-jetpack/_inc/style.module.scss
@@ -34,7 +34,8 @@
 		// layout sideways. Most noticeable on Firefox / platforms with classic
 		// (space-consuming) scrollbars; a no-op where unsupported. The selector
 		// mirrors the "scrollable middle" defined by jetpack-admin-page-layout.
-		.jp-admin-page__page > :not(:first-child):not(.jetpack-footer) {
+		.jp-admin-page__page > :not(:first-child):not(.jetpack-footer),
+		.jp-admin-page > .jp-admin-page__content {
 			scrollbar-gutter: stable;
 		}
 	}

From 41693bfe3a99122852dd9bfc92826d785204d5b3 Mon Sep 17 00:00:00 2001
From: Todd Wright <todd.wright@automattic.com>
Date: Wed, 2 Sep 2026 15:10:55 +1000
Subject: [PATCH 3/5] Backup: Drop the changelog entry, no Backup file changed

The fix reaches Backup through its jetpack-components and jetpack-base-styles dependencies. Consumers pick that up as a dependency update at release time, so a Backup entry breaks the convention.
---
 .../changelog/fix-admin-page-header-less-scroll-surface       | 4 ----
 1 file changed, 4 deletions(-)
 delete mode 100644 projects/packages/backup/changelog/fix-admin-page-header-less-scroll-surface

diff --git a/projects/packages/backup/changelog/fix-admin-page-header-less-scroll-surface b/projects/packages/backup/changelog/fix-admin-page-header-less-scroll-surface
deleted file mode 100644
index 75d6d3b0a21e..000000000000
--- a/projects/packages/backup/changelog/fix-admin-page-header-less-scroll-surface
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fixed
-
-Secondary admin connection screen: restore scrolling so the connect button is reachable on short viewports.

From 551823f18d550219afc74f5602fdc212872d54b4 Mon Sep 17 00:00:00 2001
From: Todd Wright <todd.wright@automattic.com>
Date: Wed, 2 Sep 2026 15:30:53 +1000
Subject: [PATCH 4/5] Components: Add Node types so the stylesheet guard test
 type-checks

The AdminPage test reads the layout mixin from disk, and the package type-checks its tests. Declare @types/node as a dev dependency and reference it from the test, as the charts package does.
---
 pnpm-lock.yaml                                               | 5 ++++-
 .../components/components/admin-page/test/component.tsx      | 5 +++--
 projects/js-packages/components/package.json                 | 1 +
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dc698d22cb85..e7e372fda1c5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -623,6 +623,9 @@ importers:
       '@types/jest':
         specifier: 30.0.0
         version: 30.0.0
+      '@types/node':
+        specifier: ^24.12.0
+        version: 24.13.3
       '@types/react':
         specifier: 18.3.31
         version: 18.3.31
@@ -634,7 +637,7 @@ importers:
         version: 7.0.0-dev.20260707.2
       jest:
         specifier: 30.4.2
-        version: 30.4.2
+        version: 30.4.2(@types/node@24.13.3)
       react:
         specifier: 18.3.1
         version: 18.3.1
diff --git a/projects/js-packages/components/components/admin-page/test/component.tsx b/projects/js-packages/components/components/admin-page/test/component.tsx
index ad5dea776fb1..2bacb58e9001 100644
--- a/projects/js-packages/components/components/admin-page/test/component.tsx
+++ b/projects/js-packages/components/components/admin-page/test/component.tsx
@@ -1,7 +1,8 @@
+/// <reference types="node" />
 /* eslint-disable testing-library/no-node-access -- these tests check class hooks
    that the `jetpack-admin-page-layout` mixin selects on. */
-import { readFileSync } from 'fs';
-import { fileURLToPath } from 'url';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
 import { render, screen } from '@testing-library/react';
 import AdminPage from '../index.tsx';
 
diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json
index c582d5fe6682..f485c517e156 100644
--- a/projects/js-packages/components/package.json
+++ b/projects/js-packages/components/package.json
@@ -119,6 +119,7 @@
 		"@testing-library/react": "16.3.2",
 		"@testing-library/user-event": "14.6.1",
 		"@types/jest": "30.0.0",
+		"@types/node": "^24.12.0",
 		"@types/react": "18.3.31",
 		"@types/react-dom": "18.3.7",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",

From 04946c5a0f332c3b6de0e2c93867eea0ff5da5ff Mon Sep 17 00:00:00 2001
From: Todd Wright <todd.wright@automattic.com>
Date: Wed, 9 Sep 2026 14:11:38 +1000
Subject: [PATCH 5/5] AdminPage: Address the second review round on the scroll
 surface

Drop the stylesheet guard test: it read base-styles' SCSS from node_modules, matched inside comments, and pulled Node types into a browser package for one assertion. The DOM tests carry the real value. The drift it guarded against is now structural: base-styles exposes the scrollable middle as a mixin, and both the layout and My Jetpack include it instead of copying the selector list. Compiled CSS is unchanged.

Add changelog entries for the backup package and every plugin that surfaces the fixed screens, since users read plugin changelogs, not package ones. Document the content hook in the mixin's selector list.
---
 pnpm-lock.yaml                                |  5 +--
 .../base-styles/admin-page-layout.scss        | 39 ++++++++++++-------
 .../add-admin-page-scrollable-middle-mixin    |  4 ++
 .../components/admin-page/test/component.tsx  | 17 --------
 projects/js-packages/components/package.json  |  1 -
 .../fix-admin-page-header-less-scroll-surface |  4 ++
 .../my-jetpack/_inc/style.module.scss         |  6 +--
 .../fix-admin-page-header-less-scroll-surface |  4 ++
 .../fix-admin-page-header-less-scroll-surface |  4 ++
 .../fix-admin-page-header-less-scroll-surface |  4 ++
 .../fix-admin-page-header-less-scroll-surface |  4 ++
 .../fix-admin-page-header-less-scroll-surface |  4 ++
 .../fix-admin-page-header-less-scroll-surface |  4 ++
 .../fix-admin-page-header-less-scroll-surface |  4 ++
 .../fix-admin-page-header-less-scroll-surface |  4 ++
 15 files changed, 68 insertions(+), 40 deletions(-)
 create mode 100644 projects/js-packages/base-styles/changelog/add-admin-page-scrollable-middle-mixin
 create mode 100644 projects/packages/backup/changelog/fix-admin-page-header-less-scroll-surface
 create mode 100644 projects/plugins/backup/changelog/fix-admin-page-header-less-scroll-surface
 create mode 100644 projects/plugins/boost/changelog/fix-admin-page-header-less-scroll-surface
 create mode 100644 projects/plugins/jetpack/changelog/fix-admin-page-header-less-scroll-surface
 create mode 100644 projects/plugins/protect/changelog/fix-admin-page-header-less-scroll-surface
 create mode 100644 projects/plugins/search/changelog/fix-admin-page-header-less-scroll-surface
 create mode 100644 projects/plugins/social/changelog/fix-admin-page-header-less-scroll-surface
 create mode 100644 projects/plugins/stats/changelog/fix-admin-page-header-less-scroll-surface
 create mode 100644 projects/plugins/videopress/changelog/fix-admin-page-header-less-scroll-surface

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e7e372fda1c5..dc698d22cb85 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -623,9 +623,6 @@ importers:
       '@types/jest':
         specifier: 30.0.0
         version: 30.0.0
-      '@types/node':
-        specifier: ^24.12.0
-        version: 24.13.3
       '@types/react':
         specifier: 18.3.31
         version: 18.3.31
@@ -637,7 +634,7 @@ importers:
         version: 7.0.0-dev.20260707.2
       jest:
         specifier: 30.4.2
-        version: 30.4.2(@types/node@24.13.3)
+        version: 30.4.2
       react:
         specifier: 18.3.1
         version: 18.3.1
diff --git a/projects/js-packages/base-styles/admin-page-layout.scss b/projects/js-packages/base-styles/admin-page-layout.scss
index bf625e1f9c93..15b9a8769b46 100644
--- a/projects/js-packages/base-styles/admin-page-layout.scss
+++ b/projects/js-packages/base-styles/admin-page-layout.scss
@@ -12,6 +12,12 @@
 //     body.jetpack_page_my-jetpack { @include jetpack-admin-page-layout; }
 //   }
 
+// To style the scrollable middle from a consumer, include
+// `jetpack-admin-page-scrollable-middle` inside the same scope instead of
+// copying its selectors:
+
+//   @include jetpack-admin-page-scrollable-middle { scrollbar-gutter: stable; }
+
 // Selector hooks this mixin relies on (all stable, not CSS-Modules hashed):
 
 //   wp-admin shell:          #wpcontent, #wpbody-content, #wpfooter
@@ -25,6 +31,9 @@
 //   admin-ui's header:       <header> element rendered by admin-ui's <Page>
 //                            inside `.jp-admin-page__page` (no class hooks —
 //                            we anchor structurally to the HTML5 element)
+//   <AdminPage> content:     .jp-admin-page__content   (content wrapper of an
+//                                                       <AdminPage> without a
+//                                                       title or breadcrumbs)
 //   <JetpackFooter>:         .jetpack-footer
 //   Tabs wrapper convention: .jp-admin-page-tabs   (consumer-applied div that
 //                                                   wraps `@wordpress/ui`
@@ -66,6 +75,18 @@ $jp-admin-bar-height-mobile: 46px;
 $jp-breakpoint-auto-fold: 960px;
 $jp-breakpoint-mobile: 782px;
 
+// The scrollable middle of an <AdminPage>: everything between the header and
+// the footer. With a title, admin-ui's <Page> renders children as its own
+// direct children (<AdminPage> passes no `hasPadding`, so no content wrapper).
+// Without a title, <AdminPage> wraps them in `.jp-admin-page__content`.
+@mixin jetpack-admin-page-scrollable-middle {
+
+	.jp-admin-page__page > :not(:first-child):not(.jetpack-footer),
+	.jp-admin-page > .jp-admin-page__content {
+		@content;
+	}
+}
+
 @mixin jetpack-admin-page-layout {
 	// ── wp-admin chrome resets ────────────────────────────────────────
 	#wpcontent {
@@ -247,17 +268,13 @@ $jp-breakpoint-mobile: 782px;
 		padding-bottom: 0;
 	}
 
-	// The scrollable middle. <AdminPage> does not pass `hasPadding` to
-	// admin-ui's <Page>, so admin-ui's content wrapper is not rendered —
-	// children drop in as direct descendants of the page node. Target
-	// anything that isn't the header or the footer.
-
+	// ── The scrollable middle ─────────────────────────────────────────
 	// `overflow: auto` (both axes) lets any child wider than the column
 	// (dashboard grids with fixed column widths, wide tables, `100vw`
 	// descendants) scroll horizontally inside the middle instead of
 	// dragging the whole window into a horizontal scrollbar.
 
-	// `<AdminPage>` (title-branch) wraps children in
+	// `<AdminPage>` wraps children in
 	// `<Container fluid horizontalSpacing={0}><Col>{children}</Col></Container>`
 	// — that outer Container is `display: grid` and the single Col is a
 	// grid cell. Without intervention, the chain breaks here: any inner
@@ -270,13 +287,7 @@ $jp-breakpoint-mobile: 782px;
 	// fill their bounded slot. Form-style pages keep working: their
 	// children stay content-sized (default `flex: 0 1 auto`) and any
 	// overflow still falls back to Container's `overflow: auto`.
-
-	// An <AdminPage> without a title or breadcrumbs skips admin-ui's <Page>,
-	// so there is no `.jp-admin-page__page`. Its content wrapper carries
-	// `jp-admin-page__content` instead and needs the same treatment, or the
-	// fixed column clips everything below the fold.
-	.jp-admin-page__page > :not(:first-child):not(.jetpack-footer),
-	.jp-admin-page > .jp-admin-page__content {
+	@include jetpack-admin-page-scrollable-middle {
 		flex: 1 1 auto;
 		min-height: 0;
 		min-width: 0;
@@ -307,7 +318,7 @@ $jp-breakpoint-mobile: 782px;
 	// width of the panel area, so the hairline spans the column.
 
 	// `position: sticky` pins the strip to the top of the scrollable middle
-	// (`.jp-admin-page__page > :not(header):not(.jetpack-footer)`),
+	// (see `jetpack-admin-page-scrollable-middle`),
 	// which is the local opt-in equivalent of admin-ui's native sticky
 	// header — disabled globally by `<AdminPage>` per JETPACK-1386. Pinning
 	// the tabs strip here keeps cross-section navigation accessible while
diff --git a/projects/js-packages/base-styles/changelog/add-admin-page-scrollable-middle-mixin b/projects/js-packages/base-styles/changelog/add-admin-page-scrollable-middle-mixin
new file mode 100644
index 000000000000..a67b58ed11d1
--- /dev/null
+++ b/projects/js-packages/base-styles/changelog/add-admin-page-scrollable-middle-mixin
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Admin page layout: add a `jetpack-admin-page-scrollable-middle` mixin so consumers can style the scroll surface without copying its selectors.
diff --git a/projects/js-packages/components/components/admin-page/test/component.tsx b/projects/js-packages/components/components/admin-page/test/component.tsx
index 2bacb58e9001..221d86bd7a74 100644
--- a/projects/js-packages/components/components/admin-page/test/component.tsx
+++ b/projects/js-packages/components/components/admin-page/test/component.tsx
@@ -1,26 +1,9 @@
-/// <reference types="node" />
 /* eslint-disable testing-library/no-node-access -- these tests check class hooks
    that the `jetpack-admin-page-layout` mixin selects on. */
-import { readFileSync } from 'node:fs';
-import { fileURLToPath } from 'node:url';
 import { render, screen } from '@testing-library/react';
 import AdminPage from '../index.tsx';
 
 describe( 'AdminPage', () => {
-	it( 'keeps the content hook in step with the admin page layout mixin', () => {
-		// jsdom does no layout, so the only automated guard is that the mixin
-		// still selects the class this component renders.
-		const mixinPath = fileURLToPath(
-			new URL(
-				'../../../node_modules/@automattic/jetpack-base-styles/admin-page-layout.scss',
-				import.meta.url
-			)
-		);
-		expect( readFileSync( mixinPath, 'utf8' ) ).toContain(
-			'.jp-admin-page > .jp-admin-page__content'
-		);
-	} );
-
 	it( 'wraps children in the scrollable content hook when there is no header', () => {
 		render(
 			<AdminPage showHeader={ false }>
diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json
index f485c517e156..c582d5fe6682 100644
--- a/projects/js-packages/components/package.json
+++ b/projects/js-packages/components/package.json
@@ -119,7 +119,6 @@
 		"@testing-library/react": "16.3.2",
 		"@testing-library/user-event": "14.6.1",
 		"@types/jest": "30.0.0",
-		"@types/node": "^24.12.0",
 		"@types/react": "18.3.31",
 		"@types/react-dom": "18.3.7",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",
diff --git a/projects/packages/backup/changelog/fix-admin-page-header-less-scroll-surface b/projects/packages/backup/changelog/fix-admin-page-header-less-scroll-surface
new file mode 100644
index 000000000000..75d6d3b0a21e
--- /dev/null
+++ b/projects/packages/backup/changelog/fix-admin-page-header-less-scroll-surface
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Secondary admin connection screen: restore scrolling so the connect button is reachable on short viewports.
diff --git a/projects/packages/my-jetpack/_inc/style.module.scss b/projects/packages/my-jetpack/_inc/style.module.scss
index b42715889158..eafb771898ac 100644
--- a/projects/packages/my-jetpack/_inc/style.module.scss
+++ b/projects/packages/my-jetpack/_inc/style.module.scss
@@ -32,10 +32,8 @@
 		// between search results and category browse — which changes the content
 		// height, and thus whether the scrollbar is present — doesn't shift the
 		// layout sideways. Most noticeable on Firefox / platforms with classic
-		// (space-consuming) scrollbars; a no-op where unsupported. The selector
-		// mirrors the "scrollable middle" defined by jetpack-admin-page-layout.
-		.jp-admin-page__page > :not(:first-child):not(.jetpack-footer),
-		.jp-admin-page > .jp-admin-page__content {
+		// (space-consuming) scrollbars; a no-op where unsupported.
+		@include jetpack-admin-page-scrollable-middle {
 			scrollbar-gutter: stable;
 		}
 	}
diff --git a/projects/plugins/backup/changelog/fix-admin-page-header-less-scroll-surface b/projects/plugins/backup/changelog/fix-admin-page-header-less-scroll-surface
new file mode 100644
index 000000000000..75d6d3b0a21e
--- /dev/null
+++ b/projects/plugins/backup/changelog/fix-admin-page-header-less-scroll-surface
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Secondary admin connection screen: restore scrolling so the connect button is reachable on short viewports.
diff --git a/projects/plugins/boost/changelog/fix-admin-page-header-less-scroll-surface b/projects/plugins/boost/changelog/fix-admin-page-header-less-scroll-surface
new file mode 100644
index 000000000000..6d3a50c72bd0
--- /dev/null
+++ b/projects/plugins/boost/changelog/fix-admin-page-header-less-scroll-surface
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+My Jetpack: restore scrolling on the connection screen so the connect button is reachable on short viewports.
diff --git a/projects/plugins/jetpack/changelog/fix-admin-page-header-less-scroll-surface b/projects/plugins/jetpack/changelog/fix-admin-page-header-less-scroll-surface
new file mode 100644
index 000000000000..c39a01035d1a
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/fix-admin-page-header-less-scroll-surface
@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+My Jetpack: restore scrolling on the connection screen so the connect button is reachable on short viewports.
diff --git a/projects/plugins/protect/changelog/fix-admin-page-header-less-scroll-surface b/projects/plugins/protect/changelog/fix-admin-page-header-less-scroll-surface
new file mode 100644
index 000000000000..6d3a50c72bd0
--- /dev/null
+++ b/projects/plugins/protect/changelog/fix-admin-page-header-less-scroll-surface
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+My Jetpack: restore scrolling on the connection screen so the connect button is reachable on short viewports.
diff --git a/projects/plugins/search/changelog/fix-admin-page-header-less-scroll-surface b/projects/plugins/search/changelog/fix-admin-page-header-less-scroll-surface
new file mode 100644
index 000000000000..6d3a50c72bd0
--- /dev/null
+++ b/projects/plugins/search/changelog/fix-admin-page-header-less-scroll-surface
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+My Jetpack: restore scrolling on the connection screen so the connect button is reachable on short viewports.
diff --git a/projects/plugins/social/changelog/fix-admin-page-header-less-scroll-surface b/projects/plugins/social/changelog/fix-admin-page-header-less-scroll-surface
new file mode 100644
index 000000000000..6d3a50c72bd0
--- /dev/null
+++ b/projects/plugins/social/changelog/fix-admin-page-header-less-scroll-surface
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+My Jetpack: restore scrolling on the connection screen so the connect button is reachable on short viewports.
diff --git a/projects/plugins/stats/changelog/fix-admin-page-header-less-scroll-surface b/projects/plugins/stats/changelog/fix-admin-page-header-less-scroll-surface
new file mode 100644
index 000000000000..6d3a50c72bd0
--- /dev/null
+++ b/projects/plugins/stats/changelog/fix-admin-page-header-less-scroll-surface
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+My Jetpack: restore scrolling on the connection screen so the connect button is reachable on short viewports.
diff --git a/projects/plugins/videopress/changelog/fix-admin-page-header-less-scroll-surface b/projects/plugins/videopress/changelog/fix-admin-page-header-less-scroll-surface
new file mode 100644
index 000000000000..6d3a50c72bd0
--- /dev/null
+++ b/projects/plugins/videopress/changelog/fix-admin-page-header-less-scroll-surface
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+My Jetpack: restore scrolling on the connection screen so the connect button is reachable on short viewports.