From cf29705a6a92a6a85b343afefd9d0a38a8a33ce8 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Fri, 24 Apr 2026 19:59:52 -0300 Subject: [PATCH 1/2] My Jetpack: Adopt jetpack-admin-page-layout mixin MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Brings the My Jetpack admin page in line with the 8 other Jetpack admin pages migrated in the layout-unification series (Network admin, Boost, Search, Newsletter, Backup, VideoPress, Publicize, Protect). Scopes the shared `jetpack-admin-page-layout` mixin under `body.jetpack_page_my-jetpack` in the package's global stylesheet. No local layout compensation needed to remove — My Jetpack never carried the per-package height-calc / wp-admin reset hacks the other packages had. `ScrollToTop` (`_inc/admin.jsx`) and the delayed scroll in `use-connect-site` are left untouched to match the precedent commits; `window.scrollTo( 0, 0 )` becomes a no-op on this page once the inner `#wpbody-content` becomes the scroll container. If tall interstitial routes regress on hash change, both spots would switch to scrolling `#wpbody-content` directly. --- projects/packages/my-jetpack/_inc/style.module.scss | 7 +++++++ .../my-jetpack/changelog/adopt-admin-page-layout-mixin | 4 ++++ 2 files changed, 11 insertions(+) create mode 100644 projects/packages/my-jetpack/changelog/adopt-admin-page-layout-mixin diff --git a/projects/packages/my-jetpack/_inc/style.module.scss b/projects/packages/my-jetpack/_inc/style.module.scss index 4460bbb2d413..955abb293e1a 100644 --- a/projects/packages/my-jetpack/_inc/style.module.scss +++ b/projects/packages/my-jetpack/_inc/style.module.scss @@ -1,5 +1,12 @@ +@use "@automattic/jetpack-base-styles/admin-page-layout" as *; + :global { + body.jetpack_page_my-jetpack { + + @include jetpack-admin-page-layout; + } + // Hello Dolly compatibility fix body.jetpack_page_my-jetpack p#dolly { position: absolute; diff --git a/projects/packages/my-jetpack/changelog/adopt-admin-page-layout-mixin b/projects/packages/my-jetpack/changelog/adopt-admin-page-layout-mixin new file mode 100644 index 000000000000..d6c52488d628 --- /dev/null +++ b/projects/packages/my-jetpack/changelog/adopt-admin-page-layout-mixin @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +My Jetpack: Adopt jetpack-admin-page-layout mixin. From 7d4b8bdf42227c5c223a14ee2828dec358905b9b Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Sat, 25 Apr 2026 20:01:40 -0300 Subject: [PATCH 2/2] My Jetpack: rework tab panel so full-width elements are natural siblings MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The tab panel previously wrapped all content in a constrained inner container, then used `100vw` / `-50vw` math to break separators and footers out to full width. That math equates `100vw` with the container's content area, which only holds when no page scrollbar is present — when the parent admin layout introduces a vertical scrollbar, the breakout overshoots by the scrollbar's width and produces a horizontal scrollbar of its own. Restructure the panel so the inverse is true: each content component emits its full-width pieces (separator, footer) as direct siblings of the unconstrained tab-content area, and re-applies a constrain only to the inner blocks that need it. The separator collapses to a plain `width: 100%` border, and both Overview and Help footers drop their viewport-width math along with the 1288px hardcoded media-query fallback. Replaces the previously-flagged horizontal-scroll regression on this branch. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../my-jetpack-tab-panel/help/content.tsx | 63 ++++++++++++------- .../help/styles.module.scss | 26 +------- .../my-jetpack-tab-panel/overview/content.tsx | 33 ++++++---- .../overview/styles.module.scss | 25 +------- .../my-jetpack-tab-panel/products/content.tsx | 10 ++- .../my-jetpack-tab-panel/styles.module.scss | 29 ++++----- .../my-jetpack-tab-panel/tab-content.tsx | 10 +-- .../fix-tab-panel-full-width-elements | 4 ++ 8 files changed, 89 insertions(+), 111 deletions(-) create mode 100644 projects/packages/my-jetpack/changelog/fix-tab-panel-full-width-elements diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/content.tsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/content.tsx index f2fe0a2bf31f..002ca0182c44 100644 --- a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/content.tsx +++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/content.tsx @@ -1,8 +1,10 @@ import { getRedirectUrl } from '@automattic/jetpack-components'; import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import clsx from 'clsx'; import { useCallback } from 'react'; import { FullWidthSeparator } from '../full-width-separator'; +import parentStyles from '../styles.module.scss'; import { HelpCards } from './cards'; import { HelpFooter } from './footer'; import styles from './styles.module.scss'; @@ -21,33 +23,46 @@ export function HelpContent() { }, [ trackHelpRequest ] ); return ( -
-

{ __( 'Need assistance?', 'jetpack-my-jetpack' ) }

-

- { __( - 'Browse our expert guides to get help with setup, features, and troubleshooting.', - 'jetpack-my-jetpack' + <> +

- - + + +
+ - -
+ +
+
+ +
+
+ ); } 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..210d230f848e 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 @@ -1,5 +1,4 @@ @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb; -@use "../styles.module.scss" as parent; .description { font-size: 1rem; @@ -32,24 +31,9 @@ } .footer { - width: 100vw; - margin-inline-start: calc(-50vw + 50%); + width: 100%; 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; } @@ -65,14 +49,6 @@ .footer-inner { padding-top: 2.5rem; padding-bottom: 1.5rem; - width: 100%; - padding-inline: 3rem; - - @include parent.full-width-container; - - @media ( max-width: 1288px ) { - padding-inline: 0; - } } .footer-learn-more { diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/overview/content.tsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/overview/content.tsx index d7528a6b0612..175886b81b4b 100644 --- a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/overview/content.tsx +++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/overview/content.tsx @@ -1,9 +1,11 @@ import { Col, Container } from '@automattic/jetpack-components'; import { currentUserCan } from '@automattic/jetpack-script-data'; +import clsx from 'clsx'; import ConnectionsSection from '../../connections-section'; import PlansSection from '../../plans-section'; import ProductCardsSection from '../../product-cards-section'; import { FullWidthSeparator } from '../full-width-separator'; +import parentStyles from '../styles.module.scss'; import { A4AUpsell } from './a4a-upsell'; import styles from './styles.module.scss'; @@ -14,21 +16,28 @@ import styles from './styles.module.scss'; */ export function OverviewContent() { return ( -
-
- -
- - { currentUserCan( 'manage_options' ) ? ( -
- + <> +
+
+
- ) : null } + + { currentUserCan( 'manage_options' ) ? ( +
+ +
+ ) : null } +
+
- { /* Needed to show different background colour */ } -
+
@@ -39,6 +48,6 @@ export function OverviewContent() {
-
+ ); } 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..83840923ae4c 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 @@ -1,6 +1,3 @@ -@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb; -@use "../styles.module.scss" as parent; - .products { margin-bottom: 3rem; } @@ -10,33 +7,13 @@ } .footer { - width: 100vw; - margin-inline-start: calc(-50vw + 50%); + width: 100%; 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 { padding-top: 2.5rem; padding-bottom: 1.5rem; - margin: 0 auto; - width: 100%; - padding-inline: 3rem; - - @include parent.full-width-container; a, a.components-external-link, diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/products/content.tsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/products/content.tsx index 493c2bc8c5d3..db0bcbeab2a5 100644 --- a/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/products/content.tsx +++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/products/content.tsx @@ -1,5 +1,6 @@ import { __ } from '@wordpress/i18n'; import clsx from 'clsx'; +import parentStyles from '../styles.module.scss'; import { Products } from './products'; import styles from './styles.module.scss'; @@ -10,7 +11,14 @@ import styles from './styles.module.scss'; */ const ProductsContent = () => { return ( -
+

{ __( 'Products', 'jetpack-my-jetpack' ) }

{ __( 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..3045a3762c42 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 @@ -17,13 +17,23 @@ } } -.tab-content-wrapper { - padding-block-start: 2.5rem; +@mixin full-width-container { + max-width: var(--max-container-width); + margin: 0 auto; +} + +.constrained-section { + + @include full-width-container; padding-inline: 3rem; @media (max-width: gb.$break-medium ) { padding-inline: 1.5rem; } +} + +.tab-content-wrapper { + padding-block-start: 2.5rem; h2 { @@ -35,15 +45,7 @@ .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 { - max-width: var(--max-container-width); - margin: 0 auto; + width: 100%; } .my-jetpack-tab-panel--full-width { @@ -64,10 +66,5 @@ :global(.components-tab-panel__tab-content) { background-color: #fcfcfc; - - .my-jetpack-tab-panel-inner { - - @include full-width-container; - } } } 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 index 26e03d77f069..0d6978ad3d76 100644 --- 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,8 +1,6 @@ -import clsx from 'clsx'; import { HelpContent } from './help/content'; import { OverviewContent } from './overview/content'; import { ProductsContent } from './products/content'; -import styles from './styles.module.scss'; import { MyJetpackSection } from './types'; import type { ComponentType } from 'react'; @@ -30,11 +28,5 @@ export function TabContent( { name }: TabContentProps ) { return null; } - return ( -

-
- -
-
- ); + return ; } diff --git a/projects/packages/my-jetpack/changelog/fix-tab-panel-full-width-elements b/projects/packages/my-jetpack/changelog/fix-tab-panel-full-width-elements new file mode 100644 index 000000000000..aa87e8e33132 --- /dev/null +++ b/projects/packages/my-jetpack/changelog/fix-tab-panel-full-width-elements @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +My Jetpack: restructure tab panel so full-width separators and footers no longer rely on viewport-width math, eliminating the horizontal scrollbar that appeared when the page scrollbar was present.