From 9f5609fd705f335926a73526aee4cbb880edad55 Mon Sep 17 00:00:00 2001
From: "Chrysanthe (chgo)" <chgo@odoo.com>
Date: Fri, 8 Dec 2023 10:49:23 +0100
Subject: [PATCH] [FIX] point_of_sale: action pad and customer button width

This commit fixes two issues that occur when a customer has a very long
name within the `point_of_sale` module.

1. If you create a customer with a very long name, this will cause the
left panel to extend, pushing the numpad to the right, making it out of
use.

To fix this issue, we add a `mw-50` class to the container, so that we
limit its growth, and we validate the `text-truncate` class applied to
the customer name.

2. If you use the `point_of_sale` module on a mobile device, the buttons
related to main actions such as refund, customer note, billing etc are
wrapped into a `more` button. When you open that interface, if the name
of the customer is too long, it will overflow the parent container and
so generates an overflow.

To fix that issue, we simply add a `text-truncate` class to the customer
name to be sure it doesn't generate any overflow.

task-3631878

closes odoo/odoo#145531

Signed-off-by: Vlad Stroia (vlst) <vlst@odoo.com>
---
 .../src/app/screens/product_screen/action_pad/action_pad.xml    | 2 +-
 .../control_buttons/customer_button/customer_button.xml         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.xml b/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.xml
index 1937be4280f..400c946e7e4 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/action_pad/action_pad.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.ActionpadWidget">
-        <div class="actionpad d-flex flex-column flex-grow-1 p-0 border-end">
+        <div class="actionpad d-flex flex-column flex-grow-1 mw-50 p-0 border-end">
             <button class="button mobile-more-button btn btn-secondary flex-fill border-bottom" t-if="ui.isSmall and props.onClickMore" t-on-click="props.onClickMore">
                 <span>More...</span>
             </button>
diff --git a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/customer_button/customer_button.xml b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/customer_button/customer_button.xml
index fc50b170bb8..6cdc516ee72 100644
--- a/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/customer_button/customer_button.xml
+++ b/addons/point_of_sale/static/src/app/screens/product_screen/control_buttons/customer_button/customer_button.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
     <t t-name="point_of_sale.CustomerButton">
-        <div class="control-button customer-button btn rounded-0 fw-bolder" t-attf-class="{{this.partner ? 'btn-primary' : 'btn-light'}}"
+        <div class="control-button customer-button btn rounded-0 fw-bolder text-truncate" t-attf-class="{{this.partner ? 'btn-primary' : 'btn-light'}}"
          t-on-click="() => this.pos.selectPartner()">
             <i class="fa fa-user me-1" role="img" aria-label="Customer" title="Customer" />
             <t t-esc="this.partner.name" t-if="this.partner" />