I'm using Gatsby Static Site Generator to build a static portfolio site.

React Component markup looks like

      <div>
        <Helmet
          title={config.siteTitle}
          meta={[
            {"name": "description", "content": "Sample"},
            {"name": "keywords", "content": "sample, something"},
          ]}
           style={[
              {type: "text/css", cssText: homepageSVGStylesDesk}
          ]}
        />

        <div className="home-page-container" dangerouslySetInnerHTML={createHomepageSVGMarkup()}></div>
    </div>

import homepageSVGDesk, { homepageSVGStylesDesk } from './assets/images/homepageSVG-desk';

function createHomepageSVGMarkup(){
  return {__html: homepageSVGDesk}; // homepageSVGDesk is a serialised SVG markup string
}

I'm not able to figure out two things (Please open the image in a new tab to see what I'm talking about)

1. Why is a vertical scrollbar container visible, when there is no scrollbar on the page on any element
2. Why is SVG not scaling the full height as well, I've viewBox="0 0 1920 1080"set in the SVG + preserveAspectRatio hasn't been set, so it should be taking the default, scaling it automatically.

Help / Hints will be much appreciated.