From 1627d929f5414b166bc5e84d701ddcde93990b2c Mon Sep 17 00:00:00 2001
From: "Theo VINCENT (thvi)" <thvi@odoo.com>
Date: Thu, 26 Oct 2023 13:35:06 +0200
Subject: [PATCH] [FIX] pos_self_order: categories display

Fixes the display of categories in the self-order UI.

closes odoo/odoo#140095

Task-id: 3572141
Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>
---
 .../src/app/pages/product_list_page/product_list_page.scss  | 6 +++++-
 .../src/app/pages/product_list_page/product_list_page.xml   | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.scss b/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.scss
index 8e056026ac5..03d53b9eacc 100644
--- a/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.scss
+++ b/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.scss
@@ -1,6 +1,6 @@
 .navbar-container {
     .category-item, .search-button {
-        min-width: calc(3.5rem + 2vw);
+        width: calc(3.5rem + 2vw);
     }
 
     .category-item {
@@ -16,5 +16,9 @@
                 border-radius: 0.25rem;
             }
         }
+
+        .category-name {
+            word-break: break-all;
+        }
     }
 }
diff --git a/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml b/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml
index cb97667b817..4b24faf6294 100644
--- a/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml
+++ b/addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml
@@ -24,7 +24,7 @@
                                 loading="lazy"
                                 onerror="this.remove()" />
                         </div>
-                        <small class="d-block fw-bold text-center" t-esc="category.name"/>
+                        <small class="d-block fw-bold text-center category-name" t-esc="category.name"/>
                     </a>
                 </nav>