[FIX] point_of_sale: fix receipt qrcode size on iOS

Current behavior:
When printing a receipt with a QR code on an iOS device, the QR code was
too small and couldn't be scanned

Steps to reproduce:
- Setup an ePos printer for the PoS
- Activate QRCode on receipt option
- Start a PoS session on an iOS device
- Add some product to the order and validate it
- On the receipt screen click on the print button
- Try to scan the QR Code on the ticket (it's probably too small)

Note:
If you don't have an iOS device you can use browserstack and use ngrok
to expose your local server to the internet and connect to it on
browserstack. You can do the same process to expose the printer so that
you will be able to print from browserstack.

opw-3788988

closes #159185

X-original-commit: 7fff77b
Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>
Signed-off-by: Robin Engels (roen) <roen@odoo.com>

addons/point_of_sale/static/src/app/screens/receipt_screen/receipt/order_receipt.xml

@@ -91,7 +91,7 @@
                 <div class="pos-receipt-order-data mb-2">
                     Scan me to request an invoice for your purchase.
                 </div>
-                <img id="posqrcode" t-att-src="props.data.pos_qr_code" class="pos-receipt-logo"/>
+                <img id="posqrcode" t-att-src="props.data.pos_qr_code" class="pos-receipt-qrcode"/>
             </div>
 
             <div t-if="props.data.ticket_code">

addons/point_of_sale/static/src/css/pos_receipts.css

@@ -27,6 +27,11 @@
     margin: 0 auto;
 }
 
+.pos-receipt .pos-receipt-qrcode {
+    display: block;
+    margin: 0 auto;
+}
+
 .pos-receipt .pos-receipt-contact {
     text-align: center;
     font-size: 75%;