[FIX] point_of_sale: Black receipts

Some parts of the receipts had a black background, making them
unreadable. The origin of this problem was that the white background
was not applied correctly to the whole receipt. The rest of the receipt
had a transparent background which was then changed to black when
converting the receipt to an image. The parts of the receipt that had
no background were the followings:

- The parts that were out of the screen if the receipt was too long.
We fix this by explicitly specifying a height when generating the
canvas.

- `html2canvas` applies the background to a rectangle starting from
(0, 0) up to (width, height). In our case, `body` has a margin of 8px.
Our receipt was then placed in a rectangle from (8, 8) to
(width + 8, height + 8).

closes odoo/odoo#37072

Signed-off-by: pimodoo <pimodoo@users.noreply.github.com>

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

@@ -1,4 +1,6 @@
 .pos-receipt-print {
+    /*The receipt must be in the top left corner when rendered by html2canvas*/
+    margin: -8px;
     width: 512px;
     text-align: left;
     direction: ltr;

addons/point_of_sale/static/src/js/printers.js

@@ -51,6 +51,7 @@ var PrinterMixin = {
         var promise = new Promise(function (resolve, reject) {
             html2canvas($('.pos-receipt-print')[0], {
                 background :'#FFFFFF',
+                height: $('.pos-receipt-print').outerHeight(),
                 ignoreElements: function (node) {
                     // By default, html2canvas copies the whole DOM even if we just capture a part
                     // of it. When copying the list of products, it gets all of the product from the