Fix 5px gap on bottom 90-degree brackets of qrbox

[caseydwyer]

The pair of 90-degree brackets on the bottom of qrbox are nudged 5px too far down. This should (I'm like 90% sure) fix that, by pulling those two brackets (four individual pieces) back upward by 5px. Definitely check my work, but based on the other values for each object, I think this should fix it.

Below is a screenshot/example of what this aims to fix. Let me know if you have any questions, here!

[mebjas]

I am not able to reproduce this issue - what was the configurations you used?

[dylancom]

We are having the same issue in: https://github.com/getAlby/lightning-browser-extension.

Configuration: https://github.com/getAlby/lightning-browser-extension/blob/master/src/app/components/QrcodeScanner/index.tsx

[dylancom]

Just tested the code in the PR and can confirm that it fixes the issue.

[caseydwyer]

Sorry for the delay, October was absolutely bonkers at work. Here's the config we have atm:

QR.start(
  { facingMode: "environment" }, 
  { fps: 10, aspectRatio: 1, qrbox: { width: 200, height: 200 } },
  QrScannedCallback
);

Possibly also relevant; we're using Tailwind & Livewire on this project. We're targeting the #qr-reader element:

<div class="absolute inset-0 w-full p-4" wire:ignore>
  <div id="qr-reader" width="100%"></div>
</div>

[mebjas]

Can anyone confirm if this issue still exists?

[mebjas]

Closing this for now, please resend if the issue still exists or file an issue.