Size of QR code (and quiet zone) on Android is awkward

[rugk]

It works somewhat strangely:

• always "auto-scaling" enabled
• if you have it in the SVG mode: the padding (quiet zone) is nowhere shown, it is likely outside of the menu
• if in Canvas mode: although you only have a quiet zone of 1, you get a quite small QR code (at the top!)

Both looks strange…

[rugk]

Okay, actually the issue is a big CSS thing… so I tried around a little and there are multiple cases:

• we set width: auto in order to horizontally center the qr code if it is a canvas here:
  

  offline-qr-code/src/popup/modules/UserInterface.js

  Line 525 in 57f6873

  qrCodeResizeContainer.style.width = "auto";

• also the SVG and Canvas handling is totally different. Canvas is resized manually when the popup resizes, SVG does not need this thanks to it's dynamically "resizability":
  

  offline-qr-code/src/popup/modules/UserInterface.js

  Lines 235 to 238 in 57f6873

  	if (qrCodeSizeOption.sizeType !== "auto") {
  	qrCodeResizeContainer.style.width = `${newSize}px`;
  	qrCodeResizeContainer.style.height = `${newSize}px`;
  	}

This results in:

• if you remove the width: auto and use width: 100% of the qrcode-resize-area, the SVG is correctly resized and the padding is visible
• manually setting the size is likely also not a good idea in the Canvas way, as this obviously also is the wrong size for the container, actually, as the padding ("quiet zone") is added to the size of the QR code itself…

Also the CSS may generally need some redoing. I maybe need to separate the SVG and Canvas handling in CSS a bit more, e.g.…