From 74b73cee85ecebb2e25ba7bda3270e0ee12fcaf3 Mon Sep 17 00:00:00 2001
From: "Maruan Aguerdouh (magm)" <magm@odoo.com>
Date: Mon, 23 Jan 2023 14:46:19 +0000
Subject: [PATCH] [FIX] point_of_sale: fix the numpad shifting when introducing
 numbers

Steps to reproduce:

- Install point_of_sale
- Go to Point of Sale > Payment.
- Click on the numpad for many numbers.

Issue:

The content will move which will also move the position of the number
keys, creating sometimes missclicks.

Solution:

Added some changes to the numpad and payment screen content css in order
to not shift but keep the same behavior.

This issue affects all versions until master.

opw-3089013

closes odoo/odoo#111493

X-original-commit: 6909f5d0a537449330174afb06cae87dbaa99c5b
Signed-off-by: Trinh Jacky (trj) <trj@odoo.com>
---
 addons/point_of_sale/static/src/scss/pos.scss | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/addons/point_of_sale/static/src/scss/pos.scss b/addons/point_of_sale/static/src/scss/pos.scss
index 66567027bcc..b7a5f0812fb 100644
--- a/addons/point_of_sale/static/src/scss/pos.scss
+++ b/addons/point_of_sale/static/src/scss/pos.scss
@@ -1425,7 +1425,7 @@ td {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    max-width: inherit;
+    width: 100%;
     border: none;
     max-height: 100%;
 }
@@ -1433,6 +1433,7 @@ td {
     display: grid;
     grid-template-rows: auto 1fr;
     border: 10px solid $gray-300;
+    width: 30rem;
 }
 .payment-screen p.title-category {
     margin: 0;
@@ -1503,6 +1504,7 @@ td {
     flex-grow: 1;
     flex-basis: 100%;
     min-height: 60px;
+    overflow: auto;
 }
 .paymentline:active {
     background: black;
@@ -1511,17 +1513,12 @@ td {
 }
 .paymentline .payment-name {
     flex-grow: 1;
-    margin-left: 10px;
-    margin-right: 10px;
     /* make the name of the payment line to be truncated with ellipsis */
     white-space: nowrap;
-    overflow:hidden;
     text-overflow:ellipsis;
     padding: map-get($spacers, 3);
 }
 .paymentline .payment-amount {
-    margin-left: 10px;
-    margin-right: 10px;
     padding: map-get($spacers, 3);
 }
 .paymentline .delete-button {