From cec9e557c58023d7ebd3e6185452905460324fc5 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Wed, 6 May 2026 13:41:40 -0300 Subject: [PATCH] My Jetpack: fix Overview tab scrolling under fixed wpbody-content MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `.my-jetpack-screen { overflow-x: hidden }` was applied to the same div as `.jp-admin-page` (via ``). Browsers promote the unset `overflow-y: visible` to `auto` when the other axis is `hidden`/`scroll`/`clip`, which silently turned `.jp-admin-page` into a scroll container. Once the inner middle reached its scroll end, wheel events propagated to `.jp-admin-page` and shifted the entire page (header + middle + footer) up under the fixed `#wpbody-content`, exposing blank space below the footer. Drop the rule (it pre-dated the recent 100vw breakout cleanup and is no longer needed — the mixin's inner middle already handles horizontal overflow with `overflow: auto`, and `#wpbody-content` is the ultimate clip boundary). Defensively, add `overflow: visible` to `.jp-admin-page` in the layout mixin so any future consumer that drops a className with `overflow-x: hidden` on the AdminPage root won't reintroduce the bug (mixin specificity beats consumer single-class selectors). --- .../base-styles/admin-page-layout.scss | 16 ++++++++++++++++ .../admin-page-layout-defensive-overflow-visible | 4 ++++ .../my-jetpack-screen/styles.module.scss | 1 - .../changelog/fix-admin-page-overflow-x-hidden | 4 ++++ 4 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 projects/js-packages/base-styles/changelog/admin-page-layout-defensive-overflow-visible create mode 100644 projects/packages/my-jetpack/changelog/fix-admin-page-overflow-x-hidden diff --git a/projects/js-packages/base-styles/admin-page-layout.scss b/projects/js-packages/base-styles/admin-page-layout.scss index 9e91bc9f4d65..fa9c42068727 100644 --- a/projects/js-packages/base-styles/admin-page-layout.scss +++ b/projects/js-packages/base-styles/admin-page-layout.scss @@ -167,6 +167,21 @@ $jp-breakpoint-mobile: 782px; // ── root ────────────────────────────────────────────── // Neutralize the legacy -20px shift and make AdminPage a flex child // that fills its parent column. + + // `overflow: visible` is enforced here because consumers that drop a + // className with `overflow-x: hidden` on the root (e.g. to + // clip a stray horizontal overflow) would silently turn `.jp-admin-page` + // into a scroll container: any unspecified `overflow-y: visible` on the + // same element gets promoted to `overflow-y: auto` by the browser when + // the other axis is `hidden`/`scroll`/`clip`. With `.jp-admin-page` as + // a scroll container, wheel events past the inner middle's end propagate + // to it and the entire page (header + middle + footer) shifts up under + // the fixed `#wpbody-content`, exposing blank space below the footer. + // The intended scroll surface is the inner middle (defined further + // down); the inner middle clips horizontal overflow with `overflow: + // auto` already, and `#wpbody-content` is the ultimate `overflow: + // hidden` boundary, so consumer-side horizontal clipping isn't needed + // at this level. .jp-admin-page { margin-left: 0; display: flex; @@ -174,6 +189,7 @@ $jp-breakpoint-mobile: 782px; flex: 1 1 auto; min-height: 0; min-width: 0; + overflow: visible; } // ── admin-ui Page internals ─────────────────────────────────────── diff --git a/projects/js-packages/base-styles/changelog/admin-page-layout-defensive-overflow-visible b/projects/js-packages/base-styles/changelog/admin-page-layout-defensive-overflow-visible new file mode 100644 index 000000000000..4219a9d14129 --- /dev/null +++ b/projects/js-packages/base-styles/changelog/admin-page-layout-defensive-overflow-visible @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +admin-page-layout mixin: explicitly set `overflow: visible` on `.jp-admin-page` so consumers that drop a className with `overflow-x: hidden` on the `` root don't silently turn it into a scroll container (browsers promote unset `overflow-y: visible` to `auto` when the other axis is `hidden`/`scroll`/`clip`, which would shift the entire page under the fixed `#wpbody-content` once the inner middle reaches its scroll end). diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/styles.module.scss b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/styles.module.scss index 25c55749f25e..1128ced6081e 100644 --- a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/styles.module.scss +++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/styles.module.scss @@ -1,7 +1,6 @@ @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb; .my-jetpack-screen { - overflow-x: hidden; :global(.jp-admin-page-header) { padding-inline: 0.5rem; diff --git a/projects/packages/my-jetpack/changelog/fix-admin-page-overflow-x-hidden b/projects/packages/my-jetpack/changelog/fix-admin-page-overflow-x-hidden new file mode 100644 index 000000000000..21ee24ec5755 --- /dev/null +++ b/projects/packages/my-jetpack/changelog/fix-admin-page-overflow-x-hidden @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +My Jetpack: drop `overflow-x: hidden` on the `` root. The rule was a vestigial guard against the old `100vw` breakouts (since restructured) and silently turned `.jp-admin-page` into a scroll container — when the inner middle reached its end, wheel events propagated up and shifted the entire page (header + middle + footer) under the fixed `#wpbody-content`, exposing blank space below the footer.