From 2ee1a5ca9171a416794ea8669599f88c9badeb2d Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Mon, 4 May 2026 18:45:19 -0300 Subject: [PATCH 1/2] My Jetpack: adopt jetpack-admin-page-layout mixin on the main page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bring the My Jetpack dashboard in line with the rest of the layout-mixin'd consumer pages (Boost, Protect, VideoPress, Search, Newsletter, Publicize, Backup, Jetpack network admin, AI). The shared mixin gives every page the same viewport-fitted flex chain — sticky page header, internally scrollable middle, JetpackFooter pinned at the viewport bottom — so My Jetpack now reads as a peer with the rest of the Jetpack admin surface. Scope is the regular dashboard view only. The interstitial / `.jetpack-admin-full-screen` mode (signup, Add-X interstitials) keeps its take-over-the-viewport behavior; the mixin is gated behind `:not(:has(.jetpack-admin-full-screen))` so it doesn't apply when the React app is in full-screen mode. Side concerns addressed: - Drop the bespoke `body.jetpack_page_my-jetpack p#dolly` position-absolute override. With the rest of the Jetpack admin pages now centralizing the Hello Dolly normalize on `.jetpack-admin-page #dolly`, My Jetpack uses the same rule and behaves like every other page. - Drop three viewport-breakout patterns that produced horizontal scroll inside the mixin's viewport-fitted column: * The tab-panel's `.full-width-separator` (was `width: 100vw + position: relative; inset-inline-start: 50%; margin-inline-start: -50vw`) now renders as a plain block-level `border-top`. * The Overview tab's `.footer` (Plans + Connections band) drops the `width: 100vw + margin-inline-start: calc(-50vw + 50%)` trick and its `<= 1288px` `width: calc(100% + 6rem)` variant. Its background now spans the page column instead of the viewport, which is the visible content area anyway. This was the source of horizontal scroll on mobile in particular. * Same change on the Help tab's `.footer`, which used the same pattern. Net effect: page renders with the same flex chain as Boost / Protect / VideoPress / etc., and `document.documentElement.scrollWidth === document.documentElement.clientWidth` at every viewport. --- .../help/styles.module.scss | 12 ---------- .../overview/styles.module.scss | 12 ---------- .../my-jetpack-tab-panel/styles.module.scss | 4 ---- .../my-jetpack/_inc/style.module.scss | 23 +++++++++++-------- .../changelog/my-jetpack-page-layout-mixin | 4 ++++ 5 files changed, 18 insertions(+), 37 deletions(-) create mode 100644 projects/packages/my-jetpack/changelog/my-jetpack-page-layout-mixin diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/styles.module.scss b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/styles.module.scss index 1dc10c01469d..e3667f0a2b22 100644 --- a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/styles.module.scss +++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/styles.module.scss @@ -32,24 +32,12 @@ } .footer { - width: 100vw; - margin-inline-start: calc(-50vw + 50%); background: var(--studio-white, #fff); /* Center the content within the full-width background */ display: flex; justify-content: center; - // 1128 + 3rem (96px) = 1224px + 64px (no idea what that is) = 1288px - @media (max-width: 1288px) { - // I have to hardcode --max-container-width because - // media queries don't work with CSS variables - margin-inline-start: -3rem; // Match the parent's padding-inline - margin-inline-end: -3rem; - width: calc(100% + 6rem); // Compensate for the negative margins - padding-inline: 3rem; - } - section { max-width: 35rem; } diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/overview/styles.module.scss b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/overview/styles.module.scss index 936091413648..10e1b3c0f1dd 100644 --- a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/overview/styles.module.scss +++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/overview/styles.module.scss @@ -10,23 +10,11 @@ } .footer { - width: 100vw; - margin-inline-start: calc(-50vw + 50%); background: var(--studio-white, #fff); /* Center the content within the full-width background */ display: flex; justify-content: center; - - // 1128 + 3rem (96px) = 1224px + 64px (no idea what that is) = 1288px - @media ( max-width: 1288px ) { - // I have to hardcode --max-container-width - // because media queries don't work with CSS variables - margin-inline-start: -3rem; // Match the parent's padding-inline - margin-inline-end: -3rem; - width: calc(100% + 6rem); // Compensate for the negative margins - padding-inline: 3rem; - } } .footer-inner { diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/styles.module.scss b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/styles.module.scss index 2d60e2ba5aff..4a3687cec60c 100644 --- a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/styles.module.scss +++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/styles.module.scss @@ -35,10 +35,6 @@ .full-width-separator { border-top: 1px solid var(--jp-gray); - width: 100vw; - position: relative; - inset-inline-start: 50%; - margin-inline-start: -50vw; } @mixin full-width-container { diff --git a/projects/packages/my-jetpack/_inc/style.module.scss b/projects/packages/my-jetpack/_inc/style.module.scss index 4460bbb2d413..e8999bb3f10e 100644 --- a/projects/packages/my-jetpack/_inc/style.module.scss +++ b/projects/packages/my-jetpack/_inc/style.module.scss @@ -1,14 +1,19 @@ -:global { +@use "@automattic/jetpack-base-styles/admin-page-layout" as *; - // Hello Dolly compatibility fix - body.jetpack_page_my-jetpack p#dolly { - position: absolute; - inset-inline-end: 0; - z-index: 2; +:global { - @media (max-width: 782px) { - padding-inline-end: 10px; - } + // Apply the shared admin-page-layout mixin so the main My Jetpack page + // (sticky header, internally scrollable middle, JetpackFooter pinned at + // viewport bottom) matches Boost / Protect / VideoPress / Search / + // Newsletter / Publicize / Backup / Jetpack network admin / AI. + // + // Excluded: My Jetpack's `.jetpack-admin-full-screen` interstitial mode, + // which hides the admin bar and takes over the whole viewport; its + // existing rules (further down in this file) override wp-admin chrome + // directly and should keep doing so. The `:has(.jetpack-admin-full-screen)` + // selector scopes the mixin to the regular dashboard view only. + body.jetpack_page_my-jetpack:not(:has(.jetpack-admin-full-screen)) { + @include jetpack-admin-page-layout; } #my-jetpack-container { diff --git a/projects/packages/my-jetpack/changelog/my-jetpack-page-layout-mixin b/projects/packages/my-jetpack/changelog/my-jetpack-page-layout-mixin new file mode 100644 index 000000000000..09bcfa1007dd --- /dev/null +++ b/projects/packages/my-jetpack/changelog/my-jetpack-page-layout-mixin @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +My Jetpack: adopt the shared `jetpack-admin-page-layout` mixin on the main dashboard page so its layout (sticky header, internally scrollable middle, JetpackFooter pinned at viewport bottom) matches the rest of the Jetpack admin pages. Drop the bespoke Hello Dolly position-absolute override — Dolly now uses the same centralized normalize as every other Jetpack admin page. The full-width tab separator no longer uses `width: 100vw` (which overflowed the new viewport-fitted column by the wp-admin sidebar width); it now spans the page column instead. Interstitial / full-screen mode (`.jetpack-admin-full-screen`) is intentionally excluded from the mixin so it keeps its current take-over-the-viewport behavior. From 7411c22a6a4aeab64c1607b1320c332763477e9e Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Mon, 4 May 2026 20:52:13 -0300 Subject: [PATCH 2/2] Stylelint: blank line for nested at-rule + drop empty // separator --- projects/packages/my-jetpack/_inc/style.module.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/packages/my-jetpack/_inc/style.module.scss b/projects/packages/my-jetpack/_inc/style.module.scss index e8999bb3f10e..d537205be65b 100644 --- a/projects/packages/my-jetpack/_inc/style.module.scss +++ b/projects/packages/my-jetpack/_inc/style.module.scss @@ -6,13 +6,14 @@ // (sticky header, internally scrollable middle, JetpackFooter pinned at // viewport bottom) matches Boost / Protect / VideoPress / Search / // Newsletter / Publicize / Backup / Jetpack network admin / AI. - // + // Excluded: My Jetpack's `.jetpack-admin-full-screen` interstitial mode, // which hides the admin bar and takes over the whole viewport; its // existing rules (further down in this file) override wp-admin chrome // directly and should keep doing so. The `:has(.jetpack-admin-full-screen)` // selector scopes the mixin to the regular dashboard view only. body.jetpack_page_my-jetpack:not(:has(.jetpack-admin-full-screen)) { + @include jetpack-admin-page-layout; }