[FIX] pos: Receipt-Screen: elements misaligned on mobile

- Users were automatically redirected to the middle of the
  receipt screen on mobile. It direcly showed the ticket but
  users missed the buttons at the top of the page.
  We changed the DOM to use the right "flex-direction" value.

- "(Both will be sent by email)" appears when you select a customer
  and ask an invoice.
  This text was positioned in absolute to be aligned to the bottom right
  on the input. This can't work when you have a scroll bar like on mobile.
  So we now simply use "text-align: right".

- Email input was too small on mobile.
  To fix this, we decided to only keep the icon and remove "Send" text.

Task ID: 2453679

X-original-commit: ce2c8414333ca3ae6a28da0c59502e44eb16980e
Part-of: odoo/odoo#79448
Co-authored-by: Adrien Dieudonné <adr@odoo.com>

addons/point_of_sale/static/src/css/pos.css

@@ -3468,14 +3468,6 @@ td {
     display: flex;
 }
 
-.receipt-screen .default-view .actions .send-email .email-icon {
-    padding: 1rem;
-    border: solid 1px rgb(209, 209, 209);
-    border-right: none;
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
-}
-
 .receipt-screen .default-view .actions .send-email .input-email {
     display: flex;
     flex: 1;
@@ -3522,14 +3514,14 @@ td {
 }
 
 .receipt-screen .notice .send-mail-info {
-    position: absolute;
-    right: 1.5rem;
+    width: 100%;
+    text-align: right;
     font-style: italic;
 }
 
 @media screen and (max-width: 768px) {
     .receipt-screen .default-view {
-        flex-direction: column-reverse;
+        flex-direction: column;
         overflow: auto;
     }
     .receipt-screen .default-view .actions {

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

@@ -16,9 +16,6 @@
                     </div>
                 </div>
                 <div class="default-view">
-                    <div class="pos-receipt-container">
-                        <OrderReceipt order="currentOrder" t-ref="order-receipt" />
-                    </div>
                     <div class="actions">
                         <h1>How would you like to receive your receipt<t t-if="currentOrder.is_to_invoice()"> &amp; invoice</t>?</h1>
                         <div class="buttons">
@@ -27,10 +24,11 @@
                             </div>
                         </div>
                         <form t-on-submit.prevent="onSendEmail" class="send-email">
-                            <div class="email-icon"><i class="fa fa-envelope-o" aria-hidden="true"></i></div>
                             <div class="input-email">
                                 <input type="email" placeholder="Email Receipt" t-model="orderUiState.inputEmail" />
-                                <button class="send" t-att-class="{ highlight: is_email(orderUiState.inputEmail) }" type="submit">Send</button>
+                                <button class="send" t-att-class="{ highlight: is_email(orderUiState.inputEmail) }" type="submit">
+                                    <i class="fa fa-paper-plane" aria-hidden="true"/>
+                                </button>
                             </div>
                         </form>
                         <div class="notice">
@@ -42,6 +40,9 @@
                             </div>
                         </div>
                     </div>
+                    <div class="pos-receipt-container">
+                        <OrderReceipt order="currentOrder" t-ref="order-receipt" />
+                    </div>
                 </div>
             </div>
         </div>