Admin pages: honor WP.com nav-unification 272px sidebar width (#48182)

The jetpack-admin-page-layout mixin hardcodes a 160px sidebar at expanded
widths. On the WP.com wp-admin (body.is-nav-unification) the sidebar is
actually 272px, so the pinned content column started 112px inside the
sidebar and extended past the viewport on the right, visibly cropping
Newsletter, Social, Search, etc. when accessed from WP.com.

Below the auto-fold breakpoint (<= 960px) the sidebar narrows to 36px
on both surfaces, and .folded always wins at 36px, so only the
expanded-default state needs adjusting.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: CGastrell

projects/js-packages/base-styles/admin-page-layout.scss

@@ -37,8 +37,9 @@
 // runtime and there's no need to pay the custom-property indirection.
 
 // wp-admin chrome constants (see wp-admin.css).
-$jp-sidebar-width-expanded: 160px;     // default sidebar
-$jp-sidebar-width-folded: 36px;        // .folded preference OR .auto-fold class
+$jp-sidebar-width-expanded: 160px;             // default sidebar
+$jp-sidebar-width-folded: 36px;                // .folded preference OR .auto-fold class
+$jp-sidebar-width-nav-unification: 272px;      // body.is-nav-unification (WP.com wp-admin)
 $jp-admin-bar-height-desktop: 32px;
 $jp-admin-bar-height-mobile: 46px;
 
@@ -48,6 +49,9 @@ $jp-admin-bar-height-mobile: 46px;
 // We mirror these breakpoints because WP's body-class state is not always
 // in sync with the rendered viewport (the `auto-fold` class can stay stale
 // after a narrow → wide window resize).
+// WP.com's "nav-unification" (body.is-nav-unification) keeps the sidebar at
+// 272px above the auto-fold breakpoint; below 960px it narrows to 36px like
+// vanilla wp-admin, and below 782px it goes off-canvas.
 $jp-breakpoint-auto-fold: 960px;
 $jp-breakpoint-mobile: 782px;
 
@@ -112,6 +116,21 @@ $jp-breakpoint-mobile: 782px;
 		}
 	}
 
+	// WP.com's wp-admin sets `body.is-nav-unification` and renders a 272px
+	// sidebar (instead of wp-admin's default 160px) at expanded widths.
+	// Below the auto-fold breakpoint the sidebar narrows to 36px like
+	// vanilla wp-admin (core's `.auto-fold` rule wins by higher specificity),
+	// and `.folded` (user preference) always narrows to 36px — both of those
+	// cases are already covered above. The only state that needs adjusting
+	// is the expanded default at ≥ 961px. The `:not(.folded)` guard lets
+	// the `.folded` rule keep winning at wide widths on nav-unification too.
+	@media (min-width: #{$jp-breakpoint-auto-fold + 1px}) {
+
+		&.is-nav-unification:not(.folded) #wpbody-content {
+			left: $jp-sidebar-width-nav-unification;
+		}
+	}
+
 	// Every ancestor of <AdminPage> inside #wpbody-content must participate
 	// in the flex chain, or the column collapses at the first non-flex
 	// wrapper. Some pages mount their React tree with an extra wrapper in

projects/js-packages/base-styles/changelog/fix-admin-page-layout-nav-unification-sidebar

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+admin-page-layout: honor WP.com nav-unification's 272px sidebar width at expanded viewports so the content column aligns with the visible sidebar instead of leaving a 112px gap.