fix(pie-modal): DSW-2676 ensure the page doesn't scroll when the modal is opened

[raoufswe]

Describe your changes (can list changeset entries if preferable)

• Replaced the scrollToTop workaround with a fixed positioning solution, as recommended by the dialog-polyfill docs. This ensures that the modal is always rendered in the center of the viewport, regardless of the user's scroll position or the stacking context while maintaining the page's scroll position.

• The fix was tested on mobile devices such as iPhone 12, 14, and 16, using BrowserStack, and verified across our Storybook instance and the consumer web.

Screen.Recording.2025-01-14.at.13.28.03.mov

Author Checklist (complete before requesting a review, do not delete any)

• I have performed a self-review of my code.
• I have added thorough tests where applicable (unit / component / visual).
• I have reviewed the PIE Storybook/PIE Docs PR preview.
• I have reviewed visual test updates properly before approving.
• If changes will affect consumers of the package, I have created a changeset entry.
• If a changeset file has been created, I have tested these changes in PIE Aperture using the /test-aperture command.

Not-applicable Checklist items

Please move any Author checklist items that do not apply to this pull request here.

---

Testing

How do I test my changes?

Task	Link
Aperture PR	🔗
NextJS 14 deployment	🔗
Nuxt 3 deployment	🔗
Vanilla deployment	🔗

Reviewer checklists (complete before approving)

Mark items as [-] N/A if not applicable.

Reviewer 1 - @siggerzz

• I have reviewed the PIE Storybook/PIE Docs PR preview.
• I have verified that all acceptance criteria for this ticket have been completed.
• I have reviewed the Aperture changes (if added)
• If there are visual test updates, I have reviewed them.

Reviewer 2

• I have reviewed the PIE Storybook/PIE Docs PR preview.
• I have verified that all acceptance criteria for this ticket have been completed.
• I have reviewed the Aperture changes (if added)
• If there are visual test updates, I have reviewed them.

[changeset-bot]

🦋 Changeset detected

Latest commit: 311f7fa

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@justeattakeaway/pie-modal	Patch
pie-storybook	Patch
@justeattakeaway/pie-cookie-banner	Patch
@justeattakeaway/pie-webc	Patch
wc-angular12	Patch
wc-nuxt2	Patch
wc-react17	Patch
wc-react18	Patch
wc-vue3	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[raoufswe]

/snapit

[pie-design-system-bot]

Starting a new snapshot build. You can view the logs here.

[pie-design-system-bot]

No changed packages found! Please make sure you have added a changeset entry for the packages you would like to snapshot.

[raoufswe]

/test-aperture

[pie-design-system-bot]

Starting a new snapshot build. You can view the logs here.

[pie-design-system-bot]

@raoufswe Your snapshots have been published to npm!

Test the snapshots by updating your package.json with the newly-published versions:

Note

If you have more than one of these packages installed, we suggest using the new snapshots for all of them to help avoid version conflicts.

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

Then finally:

yarn install

[raoufswe]

/snapit

[pie-design-system-bot]

Starting a new snapshot build. You can view the logs here.

[pie-design-system-bot]

The build failed, please see the logs or take a look at the Workflow Tooling wiki page to make sure your PR meets the requirements.

[raoufswe]

/snapit

[pie-design-system-bot]

Starting a new snapshot build. You can view the logs here.

[pie-design-system-bot]

@raoufswe Your snapshots have been published to npm!

Test the snapshots by updating your package.json with the newly-published versions:

Note

If you have more than one of these packages installed, we suggest using the new snapshots for all of them to help avoid version conflicts.

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

Then finally:

yarn install

[raoufswe]

/test-aperture

[pie-design-system-bot]

Starting a new snapshot build. You can view the logs here.

[pie-design-system-bot]

@raoufswe Your snapshots have been published to npm!

Test the snapshots by updating your package.json with the newly-published versions:

Note

If you have more than one of these packages installed, we suggest using the new snapshots for all of them to help avoid version conflicts.

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

Then finally:

yarn install