Lock page scroll and enable backdrop dismissal for Package for Stores dialog by Copilot · Pull Request #6090 · pwa-builder/PWABuilder

Copilot · 2026-07-02T18:02:04Z

The “Package for Stores” modal was not preventing page scroll while open, so the blurred background could still move. This also aligns the dialog with expected modal behavior by allowing backdrop clicks to dismiss it when closing is permitted.

Scroll locking
- Wire publish-pane into the existing DOM scroll utility instead of relying on body height styling.
- Disable document scrolling on wa-show.
- Restore scrolling on wa-hide.
Backdrop dismissal
- Enable Web Awesome dialog lightDismiss for the Package for Stores modal.
- Preserve existing preventClosing behavior by only allowing outside-click dismissal when the dialog is allowed to close.
Regression coverage
- Add a focused packaging test that verifies:
  - opening the modal locks page scroll
  - wheel scroll does not move the background
  - clicking outside the dialog closes it and restores scrolling

<wa-dialog
  class=${classMap({ noX: this.preventClosing, dialog: true })}
  .lightDismiss=${!this.preventClosing}
  @wa-show=${() => turnOffScroll()}
  @wa-hide=${(e: any) => this.hideDialog(e)}
>

microsoft-github-policy-service · 2026-07-02T18:02:38Z

Thanks @Copilot for opening a Pull Request! The reviewers will test the PR and highlight if there is any conflict or changes required. If the PR is approved we will proceed to merge the pull request 🙌

Replace the per-dialog JavaScript scroll hacks with a single CSS rule that rides WebAwesome's own wa-scroll-lock lifecycle. WA locks scrolling by adding .wa-scroll-lock to <html> but only styles <body>; PWABuilder scrolls on <html>, so its built-in lock was a no-op. Adding html.wa-scroll-lock { overflow: hidden } makes WA's lock work for every dialog with no JS. - Remove turnOffScroll/turnOnScroll + dom-utils.ts (added by this PR) - Remove the older document.body.style.height hacks in sw-selector, test-publish-pane and manifest-editor-frame (they had the same #5061 bug) - Enable light-dismiss on all wa-dialogs and drop the preventClosing pattern - Update packaging.spec.ts to assert the wa-scroll-lock class Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

JudahGabriel · 2026-07-08T22:14:05Z

@copilot resolve the merge conflicts in this pull request

Copilot · 2026-07-08T22:22:23Z

@copilot resolve the merge conflicts in this pull request

Addressed in 434268e.

…github.com/pwa-builder/PWABuilder into pr-6090

JudahGabriel · 2026-07-08T23:02:39Z

I've updated this PR so that we use light dismissal (e.g. click outside the dialog to dismiss) for all dialogs in PWABuilder.

I've also simplified our scroll locking: Web Awesome uses a CSS class on the body, but it wasn't applying because scrolling on PWABuilder is applying to the <html> element, rather than the body. I've fixed this by applying Web Awesome's existing scroll lock style to the HTML element as needed.

Copilot

Pull request overview

This PR updates PWABuilder’s modal behavior to better match expected dialog UX: prevent background page scrolling while dialogs are open and allow outside-click (backdrop) dismissal where enabled. It also adds a regression test targeting the “Package for Stores” flow.

Changes:

Add a global CSS rule to ensure WebAwesome’s scroll-lock mechanism also blocks scrolling on <html> (PWABuilder’s scroll container).
Enable light-dismiss (backdrop dismissal) on several <wa-dialog> instances, including the Package for Stores dialog.
Add a Playwright regression test to verify scroll locking and backdrop dismissal for the Package for Stores modal.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
apps/pwabuilder/Frontend/tests/packaging.spec.ts	Adds regression coverage for scroll-lock + backdrop dismissal; test could be made less flaky.
apps/pwabuilder/Frontend/src/script/utils/dom-utils.ts	Removes prior scroll utility (file deleted in this change).
apps/pwabuilder/Frontend/src/script/pages/powerplatform-publish.ts	Stops forcing publish-pane to be non-dismissible; introduces a risk of leaving the page in an unusable state if the dialog is closed.
apps/pwabuilder/Frontend/src/script/pages/app-report.ts	Enables backdrop dismissal on additional dialogs (retest confirmation, logs, error).
apps/pwabuilder/Frontend/src/script/components/test-publish-pane.ts	Switches away from body-height scroll hack; enables light-dismiss.
apps/pwabuilder/Frontend/src/script/components/sw-selector.ts	Switches away from body-height scroll hack; enables light-dismiss.
apps/pwabuilder/Frontend/src/script/components/share-card.ts	Removes prevent-close logic; enables light-dismiss.
apps/pwabuilder/Frontend/src/script/components/publish-pane.ts	Enables light-dismiss on Package for Stores dialog and removes prevent-close wiring.
apps/pwabuilder/Frontend/src/script/components/publish-pane.styles.ts	Removes styling used to hide the close button in non-dismissible mode.
apps/pwabuilder/Frontend/src/script/components/manifest-editor-frame.ts	Removes body-height scroll hack; enables light-dismiss while preserving keyboard-close suppression in a specific tooltip scenario.
apps/pwabuilder/Frontend/public/global.css	Adds `html.wa-scroll-lock { overflow: hidden !important; }` so WA dialogs actually lock scroll in PWABuilder.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Initial plan

e76d3ca

Copilot AI assigned Copilot and JudahGabriel Jul 2, 2026

Copilot started work on behalf of JudahGabriel July 2, 2026 18:02 View session

Copilot AI linked an issue Jul 2, 2026 that may be closed by this pull request

[Bug Bash 8-25] Scrollbar is not disabled when showing the "Package for Stores" dialog #5061

Closed

Fix package modal scroll locking

6d638f0

Copilot AI changed the title ~~[WIP] Fix scrollbar issue when showing 'Package for Stores' dialog~~ Lock page scroll and enable backdrop dismissal for Package for Stores dialog Jul 2, 2026

Copilot AI requested a review from JudahGabriel July 2, 2026 18:17

Copilot finished work on behalf of JudahGabriel July 2, 2026 18:17

Copilot started work on behalf of JudahGabriel July 8, 2026 22:14 View session

Merge origin/main into scroll dialog fix

434268e

Copilot finished work on behalf of JudahGabriel July 8, 2026 22:22

Merge branch 'copilot/bug-bash-8-25-fix-scrollbar-dialog' of https://…

f8e0b25

…github.com/pwa-builder/PWABuilder into pr-6090

JudahGabriel marked this pull request as ready for review July 8, 2026 22:49

JudahGabriel requested a review from Copilot July 8, 2026 23:19

JudahGabriel approved these changes Jul 8, 2026

View reviewed changes

Copilot started reviewing on behalf of JudahGabriel July 8, 2026 23:19 View session

Copilot AI reviewed Jul 8, 2026

View reviewed changes

Comment thread apps/pwabuilder/Frontend/tests/packaging.spec.ts Outdated

Comment thread apps/pwabuilder/Frontend/tests/packaging.spec.ts

Comment thread apps/pwabuilder/Frontend/src/script/pages/powerplatform-publish.ts

Comment thread apps/pwabuilder/Frontend/src/script/components/publish-pane.ts

Potential fix for pull request finding

9da6635

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

kendzisah10 approved these changes Jul 9, 2026

View reviewed changes

kendzisah10 added this pull request to the merge queue Jul 9, 2026

Merged via the queue into main with commit 25fd08f Jul 9, 2026
5 checks passed

kendzisah10 deleted the copilot/bug-bash-8-25-fix-scrollbar-dialog branch July 9, 2026 18:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Lock page scroll and enable backdrop dismissal for Package for Stores dialog#6090

Lock page scroll and enable backdrop dismissal for Package for Stores dialog#6090
kendzisah10 merged 6 commits into
mainfrom
copilot/bug-bash-8-25-fix-scrollbar-dialog

Copilot AI commented Jul 2, 2026 •

edited

Loading

Uh oh!

microsoft-github-policy-service Bot commented Jul 2, 2026

Uh oh!

JudahGabriel commented Jul 8, 2026

Uh oh!

Copilot AI commented Jul 8, 2026

Uh oh!

JudahGabriel commented Jul 8, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

Copilot AI commented Jul 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

microsoft-github-policy-service Bot commented Jul 2, 2026

Uh oh!

JudahGabriel commented Jul 8, 2026

Uh oh!

Copilot AI commented Jul 8, 2026

Uh oh!

JudahGabriel commented Jul 8, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Copilot AI commented Jul 2, 2026 •

edited

Loading