Site Editor: Fix admin color scheme bleeding through the mobile content scrollbar gutter#79056
Conversation
…nt scrollbar gutter
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +33 B (0%) Total Size: 8.46 MB 📦 View Changed
|
| flex-grow: 1; | ||
| } | ||
|
|
||
| .edit-site-sidebar__screen-wrapper:has(.edit-site-layout__mobile-content) { |
There was a problem hiding this comment.
We could potentially add a CSS comment explaining the implicit contract that makes this work, ie. that the background lives on the wrapper (scrollbar gutter coverage) only for "mobile content" layouts, or something similar
| <ThemeProvider | ||
| color={ CONTENT_COLOR } | ||
| { areas.mobileContent ? ( | ||
| <ThemeProvider |
There was a problem hiding this comment.
It may also be worth adding an inline comment here explaining that ThemeProvider wraps SidebarContent so that its background tokens can be used on the outer wrapper to sover the scrollbar gutter
|
Flaky tests detected in 2f0313c. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/27221756455
|
|
@ciampo thanks for the review; I added comments and merged this! |
What?
Fixes #78397 (comment)
Fixes the admin color scheme background bleeding through the white content panel, at the scrollbar location, in the mobile Site Editor layout (e.g. the Styles panel).
Why?
In the mobile layout, the content panel (
areas.mobileContent) is rendered white via aThemeProvider, but its scroll container (.edit-site-sidebar__screen-wrapper) is outside that theme and has no background of its own.How?
The content panel's surface should be the scroll viewport, so the gutter is part of it. So, we move
<ThemeProvider color={ CONTENT_COLOR }>up one level to wrap<SidebarContent>.Testing Instructions
Screenshots or screencast
Use of AI Tools
I used Claude Opus 4.8 to help with the idea.