From 0915ac5a0e95ef9511559fded7cf1e149b19ce67 Mon Sep 17 00:00:00 2001
From: Arnaud Joset <arj@odoo.com>
Date: Fri, 5 Feb 2021 10:40:40 +0000
Subject: [PATCH] [IMP] web: Improve alignment in FieldMany2ManyTagAvatar

Before this commit, the avatar was not properly aligned with the text.

Taskid: 2342252
---
 addons/web/static/src/scss/fields.scss                     | 7 +++++++
 addons/web/static/src/xml/base.xml                         | 6 +++---
 .../tests/fields/relational_fields/field_one2many_tests.js | 2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/addons/web/static/src/scss/fields.scss b/addons/web/static/src/scss/fields.scss
index 96e3df91b9b..3551c52293c 100644
--- a/addons/web/static/src/scss/fields.scss
+++ b/addons/web/static/src/scss/fields.scss
@@ -237,6 +237,13 @@
                     box-shadow: none;
                     border: 1px solid gray('300');
                 }
+                .o_badge_text {
+                    display: flex;
+                    align-items:center;
+                }
+                .o_tag_badge_text {
+                    padding-left:2px;
+                }
                 .o_delete {
                     margin-top: 3px;
                 }
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 6e6e69de0ef..23d4a3de3fa 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1290,15 +1290,15 @@
         <t t-set="colornames" t-value="['No color', 'Red', 'Orange', 'Yellow', 'Light blue', 'Dark purple', 'Salmon pink', 'Medium blue', 'Dark blue', 'Fushia', 'Green', 'Purple']"/>
         <div t-attf-class="badge badge-pill #{hasDropdown ? 'dropdown' : ''} o_tag_color_#{color}" t-att-data-color="color" t-att-data-index="el_index" t-att-data-id="el.id" t-attf-title="Tag color: #{colornames[color]}">
             <t t-set="_badge_text">
-                <span class="o_badge_text" t-att-title="el.display_name"><span role="img" t-attf-aria-label="Tag color: #{colornames[color]}"/><t t-esc="el.display_name"/></span>
+                <span class="o_badge_text" t-att-title="el.display_name"><span role="img" t-attf-aria-label="Tag color: #{colornames[color]}"/><span class="o_tag_badge_text" t-esc="el.display_name"/></span>
             </t>
             <t t-if="hasDropdown">
                 <a role="button" href="#" class="dropdown-toggle o-no-caret" data-toggle="dropdown" aria-expanded="false">
-                    <t t-raw="_badge_text"/>
+                    <span t-raw="_badge_text"/>
                 </a>
             </t>
             <t t-else="">
-                <t t-raw="_badge_text"/>
+                <span t-raw="_badge_text"/>
             </t>
             <a t-if="!readonly" href="#" class="fa fa-times o_delete" title="Delete" aria-label="Delete"/>
         </div>
diff --git a/addons/web/static/tests/fields/relational_fields/field_one2many_tests.js b/addons/web/static/tests/fields/relational_fields/field_one2many_tests.js
index 8465633140f..54606151e4b 100644
--- a/addons/web/static/tests/fields/relational_fields/field_one2many_tests.js
+++ b/addons/web/static/tests/fields/relational_fields/field_one2many_tests.js
@@ -5076,7 +5076,7 @@ QUnit.module('fields', {}, function () {
                 "should correctly display the m2o");
             assert.strictEqual(form.$('.o_data_row:first td:nth(2) .badge').length, 2,
                 "m2m should contain two tags");
-            assert.strictEqual(form.$('.o_data_row:first td:nth(2) .badge:first span').text(),
+            assert.strictEqual(form.$('.o_data_row:first td:nth(2) .badge:first span .o_tag_badge_text').text(),
                 'second record', "m2m values should have been correctly fetched");
 
             await testUtils.dom.click(form.$('.o_data_row:first'));