[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

@@ -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 {