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..d537205be65b 100644 --- a/projects/packages/my-jetpack/_inc/style.module.scss +++ b/projects/packages/my-jetpack/_inc/style.module.scss @@ -1,14 +1,20 @@ +@use "@automattic/jetpack-base-styles/admin-page-layout" as *; + :global { - // Hello Dolly compatibility fix - body.jetpack_page_my-jetpack p#dolly { - position: absolute; - inset-inline-end: 0; - z-index: 2; + // 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. - @media (max-width: 782px) { - padding-inline-end: 10px; - } + // 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.