From eb6b2078cac5ffa0101c7643a77da6560b08ecde Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Sat, 2 May 2026 15:49:40 -0300 Subject: [PATCH 1/3] AI page: adopt jetpack-admin-page-layout mixin MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Brings the AI admin page in line with the other layout-mixin'd consumer pages (Boost, Protect, VideoPress, Search, Newsletter, Publicize, Backup, Jetpack network admin) so its layout — sticky header, internally scrollable middle, JetpackFooter pinned to viewport bottom — matches the rest of the Jetpack admin surface. The previous bespoke rule (`min-height: calc(100vh - 32px); > div:nth-child(2) { flex: 1; }`) was a partial reimplementation of the same intent; replaced by a single `@include jetpack-admin-page-layout` so the page benefits from the full viewport-fitted flex chain that the shared mixin provides. --- projects/plugins/jetpack/_inc/client/ai/style.scss | 14 ++++---------- .../jetpack/changelog/jetpack-ai-page-layout-mixin | 4 ++++ 2 files changed, 8 insertions(+), 10 deletions(-) create mode 100644 projects/plugins/jetpack/changelog/jetpack-ai-page-layout-mixin diff --git a/projects/plugins/jetpack/_inc/client/ai/style.scss b/projects/plugins/jetpack/_inc/client/ai/style.scss index 8f766b53f550..0e6cd997be3a 100644 --- a/projects/plugins/jetpack/_inc/client/ai/style.scss +++ b/projects/plugins/jetpack/_inc/client/ai/style.scss @@ -1,14 +1,8 @@ -// phpcs:ignore -- SCSS selector, not a PHP file -.jetpack_page_ai .admin-ui-page { - // Fill the viewport height minus the fixed 32px WP admin bar, - // so the footer sits at the bottom of the visible screen area. - min-height: calc(100vh - 32px); +@use "@automattic/jetpack-base-styles/admin-page-layout" as *; - // The fluid container (2nd direct child, between header and footer) should - // grow to fill available space, pushing the footer to the bottom. - > div:nth-child(2) { - flex: 1; - } +// phpcs:ignore -- SCSS selector, not a PHP file +body.jetpack_page_ai { + @include jetpack-admin-page-layout; } .jetpack-ai-admin { diff --git a/projects/plugins/jetpack/changelog/jetpack-ai-page-layout-mixin b/projects/plugins/jetpack/changelog/jetpack-ai-page-layout-mixin new file mode 100644 index 000000000000..12f13347b2d8 --- /dev/null +++ b/projects/plugins/jetpack/changelog/jetpack-ai-page-layout-mixin @@ -0,0 +1,4 @@ +Significance: patch +Type: enhancement + +AI page: adopt the shared `jetpack-admin-page-layout` mixin so its layout (sticky header, scrollable middle, pinned JetpackFooter) matches the rest of the Jetpack admin pages that use the AdminPage component. From 75839031d2e761aa2a56ab31f47684a1c5eaa144 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Mon, 4 May 2026 01:01:29 -0300 Subject: [PATCH 2/3] Stylelint: empty line before nested at-rule --- projects/plugins/jetpack/_inc/client/ai/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/plugins/jetpack/_inc/client/ai/style.scss b/projects/plugins/jetpack/_inc/client/ai/style.scss index 0e6cd997be3a..5de960382b72 100644 --- a/projects/plugins/jetpack/_inc/client/ai/style.scss +++ b/projects/plugins/jetpack/_inc/client/ai/style.scss @@ -2,6 +2,7 @@ // phpcs:ignore -- SCSS selector, not a PHP file body.jetpack_page_ai { + @include jetpack-admin-page-layout; } From 64be9621f119888b1e23e5b47db2b1cc0cfcfa2a Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Mon, 4 May 2026 11:45:45 -0300 Subject: [PATCH 3/3] Remove unnecessary phpcs:ignore (SCSS files aren't scanned by phpcs) --- projects/plugins/jetpack/_inc/client/ai/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/plugins/jetpack/_inc/client/ai/style.scss b/projects/plugins/jetpack/_inc/client/ai/style.scss index 5de960382b72..7736c579eeae 100644 --- a/projects/plugins/jetpack/_inc/client/ai/style.scss +++ b/projects/plugins/jetpack/_inc/client/ai/style.scss @@ -1,6 +1,5 @@ @use "@automattic/jetpack-base-styles/admin-page-layout" as *; -// phpcs:ignore -- SCSS selector, not a PHP file body.jetpack_page_ai { @include jetpack-admin-page-layout;