[FIX] point_of_sale: fix price alignment in POS receipt

- Configure a Receipt Printer for POS
- Create a Product with a long name (> 20 chars) and a big price
(i.e. PRODUCT BCDEFGHMWPGHHH - price: 9999.00)
- Create a Product with a short name (i.e. PRODUCT Z - price: 12.00)
- Make a POS sale with long product first and short as second
On the receipt, the line containing long product is too small to
contain also its price.
So the price will be on another line justified on the right.
But the following product will be stacked on the same line, making
the price on the receipt unreadable.

Someting like this:
-------------------
PRODUCT BCDEFGHMWPGHHH
PRODUCT Z     12.009999.00

The issue also appears for taxes lines and on the report of all sales
of current POS session.

This is due to a css style (float: right) applied to the price part.

opw-2639120

closes odoo/odoo#79521

Signed-off-by: Anh Thao PHAM <pta@odoo.com>

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

@@ -63,3 +63,13 @@
     text-align: center;
     font-size: 75%;
 }
+
+.responsive-price {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+}
+
+.responsive-price > .pos-receipt-right-align {
+    margin-left: auto;
+}

addons/point_of_sale/static/src/xml/SaleDetailsReport.xml

@@ -15,7 +15,7 @@
 
             <div class="orderlines">
                 <t t-foreach="products" t-as="line" t-key="line.product_id">
-                    <div>
+                    <div class="responsive-price">
                         <t t-esc="line.product_name.substr(0,20)" />
                         <span class="pos-receipt-right-align">
                             <t t-esc="Math.round(line.quantity * Math.pow(10, pos.dp['Product Unit of Measure'])) / Math.pow(10, pos.dp['Product Unit of Measure'])" />

addons/point_of_sale/static/src/xml/Screens/ReceiptScreen/OrderReceipt.xml

@@ -49,7 +49,7 @@
             <div class="orderlines">
                 <t t-foreach="receipt.orderlines" t-as="line" t-key="line.id">
                     <t t-if="isSimple(line)">
-                        <div>
+                        <div class="responsive-price">
                             <t t-esc="line.product_name_wrapped[0]" />
                             <span t-esc="env.pos.format_currency_no_symbol(line.price_display)" class="price_display pos-receipt-right-align"/>
                         </div>
@@ -111,7 +111,7 @@
                 <br/>
                 <div>Subtotal<span t-esc="env.pos.format_currency(receipt.subtotal)" class="pos-receipt-right-align"/></div>
                 <t t-foreach="receipt.tax_details" t-as="tax" t-key="tax.name">
-                    <div>
+                    <div class="responsive-price">
                         <t t-esc="tax.name" />
                         <span t-esc='env.pos.format_currency_no_symbol(tax.amount)' class="pos-receipt-right-align"/>
                     </div>