Pin settings-page snackbars to the bottom-left, off the content (#800) - #801
Conversation
Sorry, something went wrong.
…Press#800) Snackbar notifications are rendered full-width by the route shell and default to centered, where they overlap the centered settings content the user is interacting with. Add a page-scoped (body.settings_page_ai-wp-admin) rule that pins toasts to the bottom inline-start of the content area, offsetting by the WordPress admin menu width (160/36/off-canvas) so they clear both the menu and the settings cards. Uses CSS logical properties for RTL. Add an e2e regression test asserting the snackbar does not overlap the settings content column.
|
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 props-bot label. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. Co-authored-by: dhrupo <dhrupo@git.wordpress.org> Co-authored-by: dkotter <dkotter@git.wordpress.org> Co-authored-by: Anve-sri <anveshika@git.wordpress.org> Co-authored-by: ankitguptaindia <ankit-k-gupta@git.wordpress.org> To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Sorry, something went wrong.
Codecov Report✅ All modified and coverable lines are covered by tests. @@ Coverage Diff @@
## develop #801 +/- ##
==========================================
Coverage 76.48% 76.48%
Complexity 1869 1869
==========================================
Files 89 89
Lines 7990 7990
==========================================
Hits 6111 6111
Misses 1879 1879
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness.
|
Sorry, something went wrong.
Testing Result: ✅Tested this change and it works as suggested in the connected issue #800 LTR Sites: ✅
Normal Sites: ✅
|
Sorry, something went wrong.
Sorry, something went wrong.
Co-authored-by: Darin Kotter <darin.kotter@gmail.com>
What?
Closes #800
Pins snackbar notifications on the Settings → AI screen to the bottom inline-start of the content area, so they no longer appear centered over the settings content the user is interacting with.
Why?
The snackbar list is rendered full-width and position: fixed by the route shell, and each .components-snackbar gets margin: 0 auto — so toasts are horizontally centered over the (centered) settings column. Toggling a setting drops the "… enabled/disabled." toast directly on top of the rows being edited. WordPress's standard editor toast position is bottom-left; the centering here is the anomaly.
How?
A small, page-scoped CSS rule (body.settings_page_ai-wp-admin) in routes/ai-home/style.scss pins toasts to the bottom inline-start of the content area, offset by the WordPress admin-menu width so they clear both the menu and the settings cards:
Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 4.x
Used for: Reproduction (wp-env + Playwright), implementation, tests, and drafting this PR description — reviewed, tested, and edited by me.
Testing Instructions
Automated: added an e2e test in tests/e2e/specs/admin/settings.spec.js asserting the snackbar's inline-end edge does not cross into the settings content column. Run locally against wp-env and passing (chromium).
Screenshots or screencast
Verified in a real browser (wp-env). Measurements at a 1200px viewport:
Changelog Entry