Fix: Navigation overlay layout jitter - #77936

What?

Closes #77571

When opening the Navigation block overlay, the page applies an overflow: hidden rule to the <html> root, which causes the browser's vertical scrollbar to disappear. This PR dynamically adds inline padding to the <body> equal to the width of the disappearing scrollbar, preventing the background page content from jumping to the side.

Why?

Currently, if a page has enough content to require a scrollbar, opening the navigation overlay causes an abrupt layout jitter ("text jump") because the viewport suddenly expands by the width of the missing scrollbar. This creates a jarring user experience.

How?

In the navigation block's interactive frontend logic (packages/block-library/src/navigation/view.js), we intercept the openMenu action before the has-modal-open class is applied. We calculate the scrollbar width. If a scrollbar is present, we temporarily apply an equivalent paddingLeft or paddingRight (respecting rtl attributes) to the document.body.

We cache any existing inline padding values before modifying them, and accurately restore them in the closeMenu action so we don't destructively overwrite theme or plugin-specific body paddings.

Testing Instructions

1. Create/navigate to a page with enough text/content to ensure a vertical scrollbar is visible.
2. Add a Navigation block and set the "Overlay Menu" setting to "Always".
3. Add Navigation overlay and set its background to transparent and increase height to more than screen height (e.g., 100vw)
4. Save and Click the hamburger icon to open the navigation overlay on the frontend.
5. Notice that the background content stays perfectly in place and no longer shifts horizontally.
6. Close the overlay and verify everything restores correctly.

Or follow the video linked in this issue comment

Screenshots or screencast

Before

After

Use of AI Tools

Used Github Copilot(Gemini 3.1 Pro) to review the PR.