Grommet break the scroll to top on client side routing

The property overflow: auto; break the “scroll to top” on my website.
My website uses NextJS, and I found the solution from this issue.

Expected Behavior

Ideally, by default, the global style of Grommet should not break my website. Alternatively, I would like to be able to disable some properties set by grommet by default.

Actual Behavior

The routing is broken by the property overflow: auto;.
I don’t know if this is NextJS related or Client Side Routing generally related.

URL, screenshot, or Codepen exhibiting the issue

https://drive.google.com/file/d/1XiE3wsYdQcsy011_5YF5qyo0AqWH1AzT/view?usp=sharing

Steps to Reproduce

1. Go to https://phoenix-v2-a18z359ms.vercel.app
2. Scroll a bit,
3. Click on a link

Your Environment

• Grommet version:2.15.2
• Browser Name and version: Brave Version 1.16.76 Chromium: 86.0.4240.198 (Build officiel) (x86_64)
• Operating System and version (desktop or mobile): macOS Big Sur

This issue happens on all devices.

The grommet provider has full property.

Current Workaround

If I disable the full property, the issue is gone. But it breaks some of my layouts.

[guillaumeLamanda]

The solution proposed by @taysea resolve the initial issue. Thanks! However, it modifies the layout on some of my webpages (close to the behavior without full prop) but I can deal with that.

It can also measure performance degradation. Before, the calculated layout was equal to the side of the screen (but it might be a part of the routing issue ?).

Now, it is the full page height.

Notice here this is a long page with an infinite scroll entirely unrolled.

This impacts First Contentful Paint and Largest Contentful Paint.
Here for the performance page of /adn.

I noticed the HPE website also contains the element style on the <Grommet/> component. Is that a fix for the same issue? If this is the case, some documentation might be helping.
I updated the link in the description with the modification.

Anyway, huge thanks to you for helping here! 🙏

[taysea]

Thanks for the follow up link @guillaumeLamanda. We are using NextJS + Grommet for the HPE Design system website, and we do not seeing this issue (https://design-system.hpe.design/). My inclination is to say that it is not a Grommet issue but something with the setup of the NextJS project. That being said, I will try to look into our project structure to see if there is anything we had to set up to make this scrolling work.

EDIT: A quick follow-up. Can you try adding style={{ height: 'auto' }} to your <Grommet> component? This calculates the height of the Grommet container to the entire height of the content.