[Catalyst] Dialog component destroys behavior of nextjs link component

[real-marty]

What component (if applicable)

• URL for category: Stacked Layout
• Component name: The issue is related to the Dialog component

Describe the bug

If a user is not scrolled all the way up and navigates to another page, the page remains scrolled to the same position as the previous page.

This issue is caused by the Dialog component adding the following styles to the html:

overflow: hidden;
padding-right: 17px;

These styles make Next.js <Link> components behave unexpectedly. This behavior only occurs on mobile devices and is difficult to detect.

To Reproduce

Steps to reproduce the behavior:

1. Create two long pages.
2. Add the sidebar with the navbar set as sticky to the top.
3. Scroll down halfway and click a <Link> tag.
4. The next page will also be scrolled down (instead of being at the top as expected).

Expected behavior

The Dialog component should not apply these styles so that navigation can function correctly when fixed or sticky positioning is used.

Browser/Device (if applicable)

• OS: iOS / android
• Browser: Chrome, Safari
• Version: All versions

Additional context

Villing to provide more informations if needed. And sample app, where it behaves unexpectedly.

The issue is also on the stack overflow here:

https://stackoverflow.com/a/76449161/20791908