[FIX] pos_restaurant: split bill screen responsive

The layout of the split bill screen is broken after the responsive pos ui.
This fixes the split bill screen and make it also responsive.

New classes are introduced because reusing proved to be very difficult.
One benefit of declaring a new classes (then styling them) is that we can
target the particular elements that we wanted to change without the concerns
that another elements are changed.

closes odoo/odoo#54529

X-original-commit: 51f0c6a1be912192d910d47b79ac2cb3c5b42784
Signed-off-by: pimodoo <pimodoo@users.noreply.github.com>

4 files changed, 103 insertions, 22 deletions

diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index 189e604da8f..6a6fda764e9 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -2193,7 +2193,6 @@ td {
 
 .splitbill-screen .order-info {
     text-align: center;
-    margin-bottom:20px;
     padding: 20px 0px;
     font-size: 64px;
     color: #43996E;
@@ -2214,6 +2213,8 @@ td {
     text-align: left;
     max-width: 500px;
     -webkit-transform: translate3d(0,0,0);
+    height: max-content;
+    width: 100%;
 }
 .splitbill-screen .order .orderline.selected{
     background: rgb(110,200,155);
diff --git a/addons/pos_restaurant/static/src/css/restaurant.css b/addons/pos_restaurant/static/src/css/restaurant.css
index 6dccbc2de50..c7cb17e3643 100644
--- a/addons/pos_restaurant/static/src/css/restaurant.css
+++ b/addons/pos_restaurant/static/src/css/restaurant.css
@@ -315,3 +315,79 @@
     margin-right: 4px;
 }
 
+/* ------ SPLIT BILL SCREEN ------- */
+
+.splitbill-screen.screen .contents {
+    display: flex;
+    flex-flow: column nowrap;
+    margin: 0px auto;
+    max-width: 1024px;
+    border-left: dashed 1px rgb(215,215,215);
+    border-right: dashed 1px rgb(215,215,215);
+    height: 100%;
+}
+.splitbill-screen.screen .main {
+    display: flex;
+    flex-flow: row nowrap;
+    /* take the remaining vertical space */
+    flex: 1;
+    /* do not capture overflow in this element */
+    overflow: hidden;
+}
+.splitbill-screen.screen .main .lines {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    /* show scrollbar inside this element if its content overflows */
+    overflow-y: auto;
+}
+.splitbill-screen.screen .main .controls {
+    display: flex;
+    flex-flow: column nowrap;
+}
+.splitbill-screen.screen .pay-button {
+    margin: 16px;
+}
+.splitbill-screen.screen .pay-button .button {
+    background: #e2e2e2;
+    line-height: 74px;
+    font-size: 16px;
+    border: solid 1px rgb(202, 202, 202);
+    border-top-width: 0px;
+    cursor: pointer;
+    width: 100%;
+    text-align: center;
+}
+.splitbill-screen.screen .pay-button .button:first-child {
+    border-top-width: 1px;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+}
+.splitbill-screen.screen .pay-button .button:last-child {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+.splitbill-screen.screen .pay-button .button:active {
+    background: black;
+    border-color: black;
+    color: white;
+}
+
+.splitbill-screen.screen .main .lines {
+    border-right: dashed 1px rgb(215,215,215);
+}
+
+.splitbill-screen.screen .main .controls {
+    flex: 1;
+}
+
+/* ------ NARROWER SCREEN ------ */
+@media screen and (max-width: 768px) {
+    .splitbill-screen.screen .main {
+        flex-flow: column nowrap;
+    }
+    .splitbill-screen.screen .main .controls {
+        border-top: dashed 1px rgb(215,215,215);
+        flex: none;
+    }
+}
diff --git a/addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitBillScreen.xml b/addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitBillScreen.xml
index f09ecdcdc1d..f853d8aafca 100644
--- a/addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitBillScreen.xml
+++ b/addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitBillScreen.xml
@@ -3,35 +3,39 @@
 
     <t t-name="SplitBillScreen" owl="1">
         <div class="splitbill-screen screen">
-            <div class="screen-content">
+            <div class="contents">
                 <div class="top-content">
                     <span class="button back" t-on-click="back">
                         <i class="fa fa-angle-double-left"></i>
                         <span> </span>
                         <span>Back</span>
                     </span>
-                    <h1>Bill Splitting</h1>
-                </div>
-                <div class="left-content touch-scrollable scrollable-y">
-                    <div class="order">
-                        <ul class="orderlines">
-                            <t t-foreach="orderlines" t-as="line" t-key="line.cid">
-                                <SplitOrderline line="line" split="splitlines[line.id]" />
-                            </t>
-                        </ul>
+                    <div class="top-content-center">
+                        <h1>Bill Splitting</h1>
                     </div>
                 </div>
-                <div class="right-content touch-scrollable scrollable-y">
-                    <div class="order-info">
-                        <span class="subtotal">
-                            <t t-esc="env.pos.format_currency(newOrder.get_subtotal())" />
-                        </span>
+                <div class="main">
+                    <div class="lines">
+                        <div class="order">
+                            <ul class="orderlines">
+                                <t t-foreach="orderlines" t-as="line" t-key="line.cid">
+                                    <SplitOrderline line="line" split="splitlines[line.id]" />
+                                </t>
+                            </ul>
+                        </div>
                     </div>
-                    <div class="paymentmethods">
-                        <div class="button payment" t-on-click="proceed">
-                            <i class="fa fa-chevron-right" />
-                            <span> </span>
-                            <span>Payment</span>
+                    <div class="controls">
+                        <div class="order-info">
+                            <span class="subtotal">
+                                <t t-esc="env.pos.format_currency(newOrder.get_subtotal())" />
+                            </span>
+                        </div>
+                        <div class="pay-button">
+                            <div class="button" t-on-click="proceed">
+                                <i class="fa fa-chevron-right" />
+                                <span> </span>
+                                <span>Payment</span>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/addons/pos_restaurant/static/tests/tours/helpers/SplitBillScreenTourMethods.js b/addons/pos_restaurant/static/tests/tours/helpers/SplitBillScreenTourMethods.js
index 77b7e392174..d1c802bf8d4 100644
--- a/addons/pos_restaurant/static/tests/tours/helpers/SplitBillScreenTourMethods.js
+++ b/addons/pos_restaurant/static/tests/tours/helpers/SplitBillScreenTourMethods.js
@@ -28,7 +28,7 @@ odoo.define('pos_restaurant.tour.SplitBillScreenTourMethods', function (require)
             return [
                 {
                     content: 'click pay button',
-                    trigger: `.splitbill-screen .paymentmethods .payment`
+                    trigger: `.splitbill-screen .pay-button .button`
                 }
             ]
         }