Full screen Here Map has black bar at the bottom

Question

I'm using Here Maps JS API within a Vue application. When toggling into full screen mode I'm dynamically setting the height of the container within which the Here Map is rendered. (100vh and 100vw) I also have an event listener registered for the map so that it can respond to the resize event:

  window.addEventListener('resize', () => {
    this.map.getViewPort().resize();
  });

The map does take up the entire page as I can see the logo at the bottom of the screen but there's a black bar with no map details along the bottom:

What could be causing this?