Premium Analytics: Keep settings drawer above widget chrome in stories - #50350
Conversation
The widget settings drawer has no z-index of its own; widget headers' z-index: 1 escalated past the story helper's wrappers and painted over the body-portaled drawer. isolation: isolate contains them, matching the stacking context the wp-admin shell provides in product. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
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:
If you have questions about anything, reach out in #jetpack-developers for guidance! |
Code Coverage SummaryThis 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. 🤷 |
🤖 Review-cycle summary —
|
Fixes a Storybook-only stacking bug noticed while testing #50328.
Proposed changes
isolation: isolateto the outer box of the sharedWidgetDashboardWithWidgetstory helper. The widget settings drawer carries no z-index of its own (--wp-ui-drawer-z-indexdefaults toinitial, per the@wordpress/uiDrawer contract), so dashboard-internalz-index: 1elements (widget headers, resize handles) escalated to the document level and painted over the body-portaled drawer. Isolating the helper's stacking context keeps them contained — the same containment the wp-admin shell provides on the real dashboard, which is why the product surface was unaffected.Related product discussion/links
Does this pull request change what data or activity we track or use?
No. Storybook story helper only; no runtime code is touched.
Testing instructions
pnpm run storybook:devfromprojects/js-packages/storybook).WidgetDashboardWithWidgetstory (e.g.Packages/Premium Analytics/Widgets/LocationsorTopPlatforms).dashboardWidthwider than the preview and check the canvas scrolls horizontally while the drawer stays anchored to the viewport edge.