From 5924b75dbdae9ce24fb3961d4ac2c09e2b430765 Mon Sep 17 00:00:00 2001
From: "David Monnom (moda)" <moda@odoo.com>
Date: Fri, 29 Dec 2023 13:41:58 +0100
Subject: [PATCH] [IMP] pos_restaurant: improve UX of order button

Before, when category name is small it can be difficult to read
quantities.

closes odoo/odoo#147753

Now: quantities are to the left of category names with a little padding
Taskid: 3630619
Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>
---
 .../product_screen/actionpad_widget/actionpad_widget.xml    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/addons/pos_restaurant/static/src/overrides/components/product_screen/actionpad_widget/actionpad_widget.xml b/addons/pos_restaurant/static/src/overrides/components/product_screen/actionpad_widget/actionpad_widget.xml
index b431b68b8ee..5b97d5d3553 100644
--- a/addons/pos_restaurant/static/src/overrides/components/product_screen/actionpad_widget/actionpad_widget.xml
+++ b/addons/pos_restaurant/static/src/overrides/components/product_screen/actionpad_widget/actionpad_widget.xml
@@ -17,9 +17,9 @@
                 Order
                 <div t-if="displayCategoryCount.length" class="break-line fw-normal fs-6 w-100  border-top mt-1 pt-1">
                     <t t-foreach="displayCategoryCount" t-as="categoryCountLine"  t-key="categoryCountLine_index">
-                        <div class="row g-0 my-1 w-100">
-                            <label class="col text-start text-truncate ps-0" ><t t-esc="categoryCountLine.name"/></label>
-                            <label class="col-3 text-center rounded p-0" style="background-color:rgba(0, 0, 0, 0.3);"><t t-esc="categoryCountLine.count"/></label>
+                        <div class="d-flex justify-content-start g-0 my-1 w-100">
+                            <label class="rounded px-2 py-0 me-1" style="background-color:rgba(0, 0, 0, 0.3);"><t t-esc="categoryCountLine.count"/></label>
+                            <label class="text-truncate ps-0" ><t t-esc="categoryCountLine.name"/></label>
                         </div>
                     </t>
                 </div>