My Jetpack: Adopt jetpack-admin-page-layout mixin

[CGastrell]

Proposed changes

• Adopts the shared jetpack-admin-page-layout SCSS mixin (from @automattic/jetpack-base-styles) for the My Jetpack admin page, bringing it in line with the 8 other Jetpack admin pages migrated in the prior layout-unification series (Network admin, Boost, Search, Newsletter, Backup, VideoPress, Publicize, Protect).

• After this change the My Jetpack page has a fixed Jetpack header, an internally-scrolling middle section, and a JetpackFooter pinned to the bottom of the viewport — no window-level scroll, consistent with the other migrated pages.

• Removes the per-package layout compensation that the mixin now handles (wp-admin padding/margin counters, any local #wpfooter overrides or height-calc workarounds — see the diff for specifics).

• ScrollToTop updated to scroll the internal #wpbody-content container rather than window, since the window no longer scrolls on this page.

• Tab panel restructure (second commit). Reworks MyJetpackTabPanel so its full-width children — the under-tabs separator, the in-tab separators in Overview/Help, and the Overview/Help white footers — are rendered as direct, naturally-full-width siblings of the tab-content area instead of being broken out of a constrained inner with 100vw / -50vw math. The viewport-width math equates 100vw with the container's content area, which only holds when the page itself has no scrollbar; under the new admin-page-layout (which introduces an internal scroll container) the breakout overshot by the scrollbar's width and produced a horizontal scrollbar of its own. The new structure exposes two composable utilities (.constrained-section and .tab-content-wrapper) that each content component applies to its own constrained blocks, while full-width pieces sit outside them. Both Overview and Help footers also drop the 1288px hardcoded media-query fallback that was tied to the old breakout.

  Before / After

  Desktop (1440×900)

  Tab	Before	After
  Overview
  Products
  Help

  Mobile (390×844)

  Tab	Before	After
  Overview
  Products
  Help

Does this pull request change what data or activity we track or use?

No. This is layout/CSS only. No data collection, no new tracks events, no permission changes.

Testing instructions

1. Install/activate Jetpack on a connected site and log in as an admin.
2. Visit My Jetpack (admin.php?page=my-jetpack).
3. Confirm the Jetpack header stays pinned to the top when you scroll inside the page content.
4. Confirm the JetpackFooter is pinned to the bottom of the viewport (not floating mid-page on tall content, not missing on short content).
5. Confirm there is no horizontal scrollbar at desktop widths (e.g. 1440px and 1200px) or at the ≤782px mobile breakpoint. This was the regression the second commit fixes — document.documentElement.scrollWidth should equal clientWidth.
6. Resize the window across the 782px and 960px breakpoints. Confirm the sidebar offset and body-content column width stay correct (no dead gap on the right, no content clipping on the left).
7. Toggle the sidebar manually (.folded) — confirm layout adjusts.
8. Confirm the admin bar (32px desktop / 46px mobile) is correctly accounted for — no overlap with the Jetpack header, no gap.
9. Click through Overview / Products / Help tabs. On each:
   • The horizontal separator immediately below the tabs should span the full panel width.
   • Constrained content blocks (cards, descriptions, charts, A4A upsell, help cards) should center inside the panel with the standard --max-container-width constraint.
   • On Overview and Help: the white-background footer at the bottom (Plans+Connections / HelpFooter respectively) should render edge-to-edge of the panel, with its inner content re-constrained to the same max-width column as the rest of the page.
10. Click around the My Jetpack internal routes (onboarding flow, product interstitials, connection screens) and confirm each still renders without regressions.
11. Confirm ScrollToTop still works when navigating between internal routes — the content area should scroll to the top, not stay where the previous route left it.
12. Confirm JITM cards (if any active) still render in their usual spot.
13. Confirm the "Modules" and "Reset options" footer links (if present) still render and work.

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the update/my-jetpack-admin-page-layout branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/my-jetpack-admin-page-layout

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• 🔴 Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

[jp-launch-control]

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report

[CGastrell]

Close in favor of #48503