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

.changeset/itchy-peas-develop.md

@@ -0,0 +1,6 @@
+---
+"@justeattakeaway/pie-modal": patch
+"pie-storybook": patch
+---
+
+[Fixed] - Ensure page doesn't scroll when the modal is opened

apps/pie-storybook/stories/pie-modal.stories.ts

@@ -274,7 +274,8 @@ const FormStoryTemplate = (props: ModalProps) => {
 
 const ScrollablePageStoryTemplate = (props: ModalProps) => html`
     ${BaseStoryTemplate(props)}
-    ${createScrollablePageHTML()}`;
+    ${createScrollablePageHTML()}
+    <pie-button id="open-modal" @click=${toggleModal}>Toggle Modal</pie-button>`;
 
 const FocusableElementsPageStoryTemplate = (props: ModalProps) => html`
     ${BaseStoryTemplate(props)}

packages/components/pie-cookie-banner/test/visual/pie-cookie-banner.spec.ts

@@ -20,11 +20,6 @@ test.describe('PieCookieBanner - Visual tests`', () => {
 
         await pieCookieBannerComponent.clickManagePreferencesAction();
 
-        // This fixes modal being pushed down in screenshots
-        await page.$eval('dialog', (el) => {
-            el.style.top = '20px';
-        });
-
         await percySnapshot(page, 'PieCookieBanner Manage preferences - Visual Test');
     });
 

packages/components/pie-modal/src/index.ts

@@ -310,10 +310,6 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
      */
     private _disableBodyScroll (): void {
         if (this._modalScrollContainer) {
-            // Hack to prevent Safari rendering the modal outside the viewport
-            // when the body scroll lock is active
-            if ('scrollTo' in window) window.scrollTo(0, 0);
-
             disableBodyScroll(this._modalScrollContainer);
         }
     }

packages/components/pie-modal/src/modal.scss

@@ -36,6 +36,8 @@
         flex-direction: column;
     }
 
+    position: fixed;
+    top: 0;
     border-radius: var(--modal-border-radius);
     border: none;
     box-shadow: var(--modal-elevation);