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>

[ladderschool]

It's the finder that doesn't adhere to the container width and height. If I set width and height to 100% the container shows the video correctly, but the finder as you can see in the screenshot just overflows.

I don't understand how to style the finder?

[martinmorenoc]

is there a way to style the finder and component buttons?

[MrLightful]

Yeah same issue. classNames and styles don't help.