Styling issue

[ladderschool]

I have a lot of issues with the scanner component properly taking width and height. What are best practices in making this work? Mine looks like this. I upgraded to 2.0.8 as well. It looks fine on mobile devices when opened on my website, but on the desktop browser where I'm using OBS as a virtual camera it looks like below.. is OBS as a virtual cam not supported?

      <div id="qr-scanner">
        <Scanner
          onScan={(result) => handleScan(result)}
          onError={(error: string) => setScanErrorMessage(error)}
          allowMultiple={false}
          constraints={{
            advanced: [{ facingMode: 'environment' }],
          }}
          components={{
            finder: true,
            audio: false,
          }}
          /*
          styles={{
            container: {
              width: '100%',
              margin: '0',
              padding: '0',
            },
          }}
          */
        />
      </div>