Site Editor: Fix admin color scheme bleeding through the mobile content scrollbar gutter (#79056)

Author: fushar

packages/edit-site/src/components/layout/index.js

@@ -184,10 +184,18 @@ function Layout() {
 												}
 											/>
 										) }
-										<SidebarContent routeKey={ routeKey }>
-											{ areas.mobileContent ? (
-												<ThemeProvider
-													color={ CONTENT_COLOR }
+										{ areas.mobileContent ? (
+											/*
+											 * ThemeProvider wraps SidebarContent (rather than
+											 * just the content) so the scroll wrapper it renders
+											 * inherits the content background tokens. See
+											 * `.edit-site-sidebar__screen-wrapper` in style.scss.
+											 */
+											<ThemeProvider
+												color={ CONTENT_COLOR }
+											>
+												<SidebarContent
+													routeKey={ routeKey }
 												>
 													<div className="edit-site-layout__mobile-content">
 														<ErrorBoundary>
@@ -196,13 +204,17 @@ function Layout() {
 															}
 														</ErrorBoundary>
 													</div>
-												</ThemeProvider>
-											) : (
+												</SidebarContent>
+											</ThemeProvider>
+										) : (
+											<SidebarContent
+												routeKey={ routeKey }
+											>
 												<ErrorBoundary>
 													{ areas.mobileSidebar }
 												</ErrorBoundary>
-											) }
-										</SidebarContent>
+											</SidebarContent>
+										) }
 										<SaveHub />
 										<SavePanel />
 									</>

packages/edit-site/src/components/layout/style.scss

@@ -84,6 +84,13 @@
 	display: flex;
 	flex-direction: column;
 	flex-grow: 1;
+}
+
+// On mobile, the content surface lives on the scroll wrapper
+// (not the inner content element) so it also covers the wrapper's
+// reserved scrollbar gutter, preventing the theme background color from
+// bleeding through.
+.edit-site-sidebar__screen-wrapper:has(.edit-site-layout__mobile-content) {
 	background: var(--wpds-color-bg-surface-neutral);
 }