QR code component

EDIT: Fixed the height issue by adding min-height:100vh to the container.

Things I found difficult:

Didn't have much trouble turning the design of the component itself into code, but I did struggle a bit with the layout of the container element. I wanted it to cover the entire screen so I thought I'd give it a height and a width. the height in particular was problematic especially when set to 100vh , or even when set to 100% with ancestors( both body and html also set to 100%). the elements would change position and overlap, so I had to abandon setting the height.

did flex-direction column and gave a big gap to have the container take full height.

I finally decided to abandon setting width as well, which worked for the best as it made for a much better responsive design without having to use queries. it also allowed me to set the background color on the container itself since it now occupied the entire width, instead of setting the background color on the body like I did prior which I'm not sure is a best practice.

feedback on those areas pertaining to the layout would be much appreciated.