From fb96612d6d1ecb1f69d0c6842071fb97b119c6b4 Mon Sep 17 00:00:00 2001
From: "Adrien Minne (adrm)" <adrm@odoo.com>
Date: Mon, 18 Mar 2024 15:37:07 +0100
Subject: [PATCH] [FIX] menu: non-aligned menu items

If the menu items were too long, and that the menu item had a blank
space in place of an icon, the menu texts were not aligned properly
because of a flex shrink.

Task: 3814222
X-original-commit: 261616dfafc1217ce9a5e8da7262c0bc0dc164d4
---
 src/components/menu/menu.xml                  |  2 +-
 .../top_bar_component.test.ts.snap            | 24 +++++++++----------
 .../context_menu_component.test.ts.snap       | 22 ++++++++---------
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/menu/menu.xml b/src/components/menu/menu.xml
index 1fa3e7c97..27e045d5f 100644
--- a/src/components/menu/menu.xml
+++ b/src/components/menu/menu.xml
@@ -22,7 +22,7 @@
               t-att-class="{ 'o-menu-root': isMenuRoot, 'disabled': !isMenuEnabled, 'o-menu-item-active': isParentMenu(subMenu, menuItem)}"
               t-att-style="getColor(menuItem)">
               <div class="d-flex w-100">
-                <div t-if="childrenHaveIcon" class="o-menu-item-icon align-middle">
+                <div t-if="childrenHaveIcon" class="o-menu-item-icon align-middle flex-shrink-0">
                   <t t-if="getIconName(menuItem)" t-call="{{getIconName(menuItem)}}"/>
                 </div>
                 <div class="o-menu-item-name align-middle text-truncate" t-esc="getName(menuItem)"/>
diff --git a/tests/__snapshots__/top_bar_component.test.ts.snap b/tests/__snapshots__/top_bar_component.test.ts.snap
index 2e9569100..f45b98604 100644
--- a/tests/__snapshots__/top_bar_component.test.ts.snap
+++ b/tests/__snapshots__/top_bar_component.test.ts.snap
@@ -612,7 +612,7 @@ exports[`TopBar component can set cell format 1`] = `
             class="d-flex w-100"
           >
             <div
-              class="o-menu-item-icon align-middle"
+              class="o-menu-item-icon align-middle flex-shrink-0"
             >
               <svg
                 class="o-icon"
@@ -646,7 +646,7 @@ exports[`TopBar component can set cell format 1`] = `
             class="d-flex w-100"
           >
             <div
-              class="o-menu-item-icon align-middle"
+              class="o-menu-item-icon align-middle flex-shrink-0"
             />
             
             <div
@@ -673,7 +673,7 @@ exports[`TopBar component can set cell format 1`] = `
             class="d-flex w-100"
           >
             <div
-              class="o-menu-item-icon align-middle"
+              class="o-menu-item-icon align-middle flex-shrink-0"
             />
             
             <div
@@ -701,7 +701,7 @@ exports[`TopBar component can set cell format 1`] = `
             class="d-flex w-100"
           >
             <div
-              class="o-menu-item-icon align-middle"
+              class="o-menu-item-icon align-middle flex-shrink-0"
             />
             
             <div
@@ -733,7 +733,7 @@ exports[`TopBar component can set cell format 1`] = `
             class="d-flex w-100"
           >
             <div
-              class="o-menu-item-icon align-middle"
+              class="o-menu-item-icon align-middle flex-shrink-0"
             />
             
             <div
@@ -761,7 +761,7 @@ exports[`TopBar component can set cell format 1`] = `
             class="d-flex w-100"
           >
             <div
-              class="o-menu-item-icon align-middle"
+              class="o-menu-item-icon align-middle flex-shrink-0"
             />
             
             <div
@@ -789,7 +789,7 @@ exports[`TopBar component can set cell format 1`] = `
             class="d-flex w-100"
           >
             <div
-              class="o-menu-item-icon align-middle"
+              class="o-menu-item-icon align-middle flex-shrink-0"
             />
             
             <div
@@ -816,7 +816,7 @@ exports[`TopBar component can set cell format 1`] = `
             class="d-flex w-100"
           >
             <div
-              class="o-menu-item-icon align-middle"
+              class="o-menu-item-icon align-middle flex-shrink-0"
             />
             
             <div
@@ -844,7 +844,7 @@ exports[`TopBar component can set cell format 1`] = `
             class="d-flex w-100"
           >
             <div
-              class="o-menu-item-icon align-middle"
+              class="o-menu-item-icon align-middle flex-shrink-0"
             />
             
             <div
@@ -872,7 +872,7 @@ exports[`TopBar component can set cell format 1`] = `
             class="d-flex w-100"
           >
             <div
-              class="o-menu-item-icon align-middle"
+              class="o-menu-item-icon align-middle flex-shrink-0"
             />
             
             <div
@@ -900,7 +900,7 @@ exports[`TopBar component can set cell format 1`] = `
             class="d-flex w-100"
           >
             <div
-              class="o-menu-item-icon align-middle"
+              class="o-menu-item-icon align-middle flex-shrink-0"
             />
             
             <div
@@ -932,7 +932,7 @@ exports[`TopBar component can set cell format 1`] = `
             class="d-flex w-100"
           >
             <div
-              class="o-menu-item-icon align-middle"
+              class="o-menu-item-icon align-middle flex-shrink-0"
             />
             
             <div
diff --git a/tests/menus/__snapshots__/context_menu_component.test.ts.snap b/tests/menus/__snapshots__/context_menu_component.test.ts.snap
index 66ac1ef4b..f082c5976 100644
--- a/tests/menus/__snapshots__/context_menu_component.test.ts.snap
+++ b/tests/menus/__snapshots__/context_menu_component.test.ts.snap
@@ -14,7 +14,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
       class="d-flex w-100"
     >
       <div
-        class="o-menu-item-icon align-middle"
+        class="o-menu-item-icon align-middle flex-shrink-0"
       >
         <svg
           class="o-icon"
@@ -52,7 +52,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
       class="d-flex w-100"
     >
       <div
-        class="o-menu-item-icon align-middle"
+        class="o-menu-item-icon align-middle flex-shrink-0"
       >
         <svg
           class="o-icon"
@@ -90,7 +90,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
       class="d-flex w-100"
     >
       <div
-        class="o-menu-item-icon align-middle"
+        class="o-menu-item-icon align-middle flex-shrink-0"
       >
         <svg
           class="o-icon"
@@ -128,7 +128,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
       class="d-flex w-100"
     >
       <div
-        class="o-menu-item-icon align-middle"
+        class="o-menu-item-icon align-middle flex-shrink-0"
       >
         <svg
           class="o-icon"
@@ -185,7 +185,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
       class="d-flex w-100"
     >
       <div
-        class="o-menu-item-icon align-middle"
+        class="o-menu-item-icon align-middle flex-shrink-0"
       >
         <svg
           class="o-icon"
@@ -218,7 +218,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
       class="d-flex w-100"
     >
       <div
-        class="o-menu-item-icon align-middle"
+        class="o-menu-item-icon align-middle flex-shrink-0"
       >
         <svg
           class="o-icon"
@@ -251,7 +251,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
       class="d-flex w-100"
     >
       <div
-        class="o-menu-item-icon align-middle"
+        class="o-menu-item-icon align-middle flex-shrink-0"
       >
         <svg
           class="o-icon"
@@ -308,7 +308,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
       class="d-flex w-100"
     >
       <div
-        class="o-menu-item-icon align-middle"
+        class="o-menu-item-icon align-middle flex-shrink-0"
       >
         <svg
           class="o-icon"
@@ -341,7 +341,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
       class="d-flex w-100"
     >
       <div
-        class="o-menu-item-icon align-middle"
+        class="o-menu-item-icon align-middle flex-shrink-0"
       >
         <svg
           class="o-icon"
@@ -374,7 +374,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
       class="d-flex w-100"
     >
       <div
-        class="o-menu-item-icon align-middle"
+        class="o-menu-item-icon align-middle flex-shrink-0"
       >
         <svg
           class="o-icon"
@@ -431,7 +431,7 @@ exports[`Context Menu integration tests context menu simple rendering 1`] = `
       class="d-flex w-100"
     >
       <div
-        class="o-menu-item-icon align-middle"
+        class="o-menu-item-icon align-middle flex-shrink-0"
       >
         <svg
           class="o-icon"