[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

@@ -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;
                 }

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>

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'));