Little helper mixin to make 100vh less painfull on mobile - more info here: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

_vh.scss

@function vh($vh) {
  @return calc(var(--vh, 1vh) * #{$vh});
}

@mixin vh($vh, $prop: height) {
  #{$prop}: $vh * 1vh;
  #{$prop}: vh($vh);
  
}

/// use it like this: 
.fullscreen {
  @include vh(100);
  @include vh(100, 'width');
}

anywhere-in-your.js

// add this to your JS
// don't forget to update on resize

const setViewportCSSVar = () => {
  const vh = window.innerHeight * 0.01
  document.documentElement.style.setProperty('--vh', `${vh}px`)
}

const onResize = () => {
  setViewportCSSVar()
}
    
setViewportCSSVar()