Pin settings-page snackbars to the bottom-left, off the content (#800)

[dhrupo]

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:

• padding-inline-start: 184px for the full (160px) admin menu, 60px when the menu is folded / auto-folded (max-width: 960px), and 24px once the menu goes off-canvas (max-width: 782px) — mirroring WordPress's own admin-menu breakpoints.
• The snackbar is aligned to the inline-start (margin-inline: 0 auto) instead of centered.
• Uses CSS logical properties so it works in RTL without a flipped stylesheet (as the file requires). No framework/shell code is touched.

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

1. Go to Settings → AI.
2. Toggle any setting (e.g. the global Enable AI switch).
3. Confirm the snackbar appears at the bottom-left, in the gutter between the admin menu and the settings cards — not centered over the content.
4. Collapse the admin menu and/or narrow the window and confirm the toast still clears the menu and content.

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:

Before	After
Toast centered (x ≈ 545–655), overlapping the Content Classification / Content Resizing rows	Toast at x ≈ 184–295 — clear of the admin menu (ends 160px) and the settings cards (start 336px)

Changelog Entry

Fixed - Settings: snackbar notifications no longer overlap the settings content; they are pinned to the bottom-left of the content area.

[github-actions]

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.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.48%. Comparing base (ea79289) to head (14c47f6).
⚠️ Report is 7 commits behind head on develop.

Additional details and impacted files

@@            Coverage Diff             @@
##             develop     #801   +/-   ##
==========================================
  Coverage      76.48%   76.48%           
  Complexity      1869     1869           
==========================================
  Files             89       89           
  Lines           7990     7990           
==========================================
  Hits            6111     6111           
  Misses          1879     1879           

Flag	Coverage Δ
unit	76.48% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Anve-sri]

Testing Result: ✅

Tested this change and it works as suggested in the connected issue #800

LTR Sites: ✅

Normal Sites: ✅

[ankitguptaindia]

Thanks @dhrupo for working on this @Anve-sri for testing. Changes look good to me.