fix: mobile dvh and dashboard website header breaking

[Cuzart]

This PR fixes some two style issues that appeared on mobile screen sizes.

The first thing is that the scroll container was set to a height of calc(100vh - 60px) which is the screen height minus the header height. For some browsers e.g. Safari on iOS this makes the whole page scrollable so you have two scroll containers and the header can be scrolled out of the viewport which is not wanted. I added another line that uses the dynamic virtual height dvh in addition to the fallback if the used browser does not support dvh.

The other issue was that the website header on the dashboard page was using display: grid and wrapped even when it was not needed. In addition there was a missing space underneath the button which looked a bit squeezed together.

Before:

After this shows the fix: there is only one scroll container and the button in the website header is not breaking into the next line. Also there is some padding that makes the spacing more balanced.

To replicate the issue just open the dashboard site on any mobile browser preferably one that supports dynamic heights like Safari.

[vercel]

@Cuzart is attempting to deploy a commit to the umami-software Team on Vercel.

A member of the Team first needs to authorize it.

[israelozarate7]

PRs are usually made against the dev branch. You are doing it against the master branch directly, if I am not mistaken, despite it being the default branch you should change your PR against dev.

[mikecao]

👍