1175 fix spark notification position

[vraja-pro]

Context

Summary

This PR can be summarized in the following changelog entry:

• Fixes position on the spark notification when using Content planner or AI Generator.

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

• Create a new post
• Click on the "Get content suggestions" button, once suggestions are loaded increase the sparks count by executing the following command in the devtool console:

wp.data.dispatch( "yoast-seo/ai-generator").setUsageCount(6)

• Check you see the spark notification in the bottom left side of the screen.
• Add afocus keyphrase and check generate AI title or meta description. Once you get the suggestions, increase te spark cunt in the same way and check the notification is in the same bottom left position.
• Repeat the tests for mobile view and check thenotification in at the bottom of the screen.

Relevant test scenarios

• Changes should be tested with the browser console open
• Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
• Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
• Changes should be tested on different browsers
• Changes should be tested on multisite

Test instructions for QA when the code is in the RC

• QA should use the same steps as above.

QA can test this PR by following these steps:

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

Other environments

• This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.
• This PR also affects Yoast SEO for Google Docs. I have added a changelog entry starting with [yoast-doc-extension], added test instructions for Yoast SEO for Google Docs and attached the Google Docs Add-on label to this PR.

Documentation

• I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

• I have tested this code to the best of my abilities.
• During testing, I had activated all plugins that Yoast SEO provides integrations for.
• I have added unit tests to verify the code works as intended.
• If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
• I have written this PR in accordance with my team's definition of done.
• I have checked that the base branch is correctly set.
• I have run grunt build:images and commited the results, if my PR introduces new images or SVGs.

Innovation

• No innovation project is applicable for this PR.
• This PR falls under an innovation project. I have attached the innovation label.
• I have added my hours to the WBSO document.

Fixes Fix spark notification position

[coveralls]

Coverage Report for CI Build 5

Warning

Build has drifted: This PR's base is out of sync with its target branch, so coverage data may include unrelated changes.
Quick fix: rebase this PR. Learn more →

Coverage increased (+0.001%) to 53.476%

Details

• Coverage increased (+0.001%) from the base build.
• Patch coverage: 1 uncovered change across 1 file (6 of 7 lines covered, 85.71%).
• 40 coverage regressions across 5 files.

Uncovered Changes

File	Changed	Covered	%
packages/js/src/ai-generator/components/modal-content.js	1	0	0.0%

Coverage Regressions

40 previously-covered lines in 5 files lost coverage.

File	Lines Losing Coverage	Coverage
packages/js/src/ai-content-planner/store/content-outline.js	22	21.31%
packages/js/src/ai-content-planner/hooks/use-fetch-content-suggestions.js	9	3.23%
packages/js/src/ai-content-planner/store/content-suggestions.js	7	76.47%
packages/js/src/ai-content-planner/containers/outline-modal-content.js	1	66.67%
packages/js/src/ai-content-planner/containers/approve-modal.js	1	0.0%

---

Coverage Stats

Relevant Lines:	66037
Covered Lines:	35179
Line Coverage:	53.27%
Relevant Branches:	16931
Covered Branches:	9189
Branch Coverage:	54.27%
Branches in Coverage %:	Yes
Coverage Strength:	45551.86 hits per line

---

💛 - Coveralls

[Copilot]

Pull request overview

Adjusts the “spark” (SparksLimitNotification) notification positioning so it consistently appears at the bottom-left of the viewport when using the AI Generator and the Content Planner modal flows.

Changes:

• Add dynamic bottom positioning for Notifications based on measured modal/panel height.
• Introduce measuring of the Content Planner modal panel via useMeasuredRef to compute notification offset.
• Update Content Planner FeatureModal tests to mock useMeasuredRef.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
packages/js/tests/ai-content-planner/components/feature-modal.test.js	Mocks useMeasuredRef to keep tests stable after introducing resize-measure behavior.
packages/js/src/ai-generator/components/modal-content.js	Adds bottom offset computation and updates Notifications inline styles for viewport positioning.
packages/js/src/ai-content-planner/components/feature-modal.js	Measures modal panel height and applies computed bottom offset to Notifications in the Content Planner modal.

[FAMarfuaty]

Is this intentional that bottom uses non-dynamic height? If yes, I think it's useful to leave a code comment to document the decision.
Additionally, 55 seems like a magic number which is unexplained and undocumented. Consider creating a constant for this variable as it's also used inside feature-modal.js

[vraja-pro]

I created a helper function for that, added comments and removed the marginTop which was not needed anymore.

[FAMarfuaty]

CR & AT ✅