Fixed overflowed scroll sidenav on desktop

[Smankusors]

Proposed changes

There's additional 60px because it's problem with mobile devices. Without it, when hiding the address bar, there's some kind of jumpy effect, or rather re-rendering effect that makes UX not really smooth. But this fix comes with another issue, see Dogfalo#4719. It's fixed on mobile. But in desktop, the scrollbar doesn't look good.

So, instead of using calc(100% + 60px), I think using 100vh is more appropriate. Here is an article explaining this.

I also deleted a temporary fix (I can't find the documentation about -moz-calc thing)

I hope this didn't create another new issue... so tell me if you found one 😉

Screenshots (if appropriate) or codepen:

Before : https://codepen.io/smankusors/pen/VwKdwPG

After : https://codepen.io/smankusors/pen/NWRzWjq

Types of changes

• Bug fix (non-breaking change which fixes an issue).
• New feature (non-breaking change which adds functionality).
• Breaking change (fix or feature that would cause existing functionality to change).

Checklist:

• I have read the CONTRIBUTING document.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

[DanielRuf]

-moz-calc is an old / deprecated vendor-prefixed version of calc for old Mozilla Firefox versions.

[Smankusors]

-moz-calc is an old / deprecated vendor-prefixed version of calc for old Mozilla Firefox versions.

and.... this is.... Firefox at 2010? I think we can safely delete this, right?

[DanielRuf]

Correct, see also https://caniuse.com/calc

[Pierstoval]

I think it's okay to move forward on this 👍

Especially since next versions of Materialize are not likely to be used by older systems IMO

[DanielRuf]

LGTM