[FIX] web: fix listView text truncate on wrong cells

This commit fixes the text truncate that should not be applied on some of
the cells inside the `listView` (causing a dot next to graphical elements).

This issue was created by this commit (a6dd707).
The inline-block display of o_field_widget was the source of the issue.

We also changed the called mixin text-overflow to text-truncate for
cleaner code. The vertical align top is then removed, and we added a
vertical align middle to fix the wrong alignement of some elements.

Thoses modifications also fix the issue with where the tags were cut in
the `listView` when the window was smaller.

task-3455121
Related to task-3326263

closes odoo/odoo#134878

X-original-commit: 53f605399755f9355554c2582ea0f693c8f947b4
Signed-off-by: Pierre Paridans (app) <app@odoo.com>

addons/web/static/src/views/fields/fields.scss

@@ -84,7 +84,7 @@
 .o_field_widget {
     // Default display and alignment of widget and internal <input/>
     text-align: inherit;
-    display: inline-block;
+    display: var(--fieldWidget-display, inline-block);
 
     textarea.o_input,
     input.o_input {

addons/web/static/src/views/list/list_renderer.scss

@@ -74,7 +74,12 @@
 
         tbody > tr > td:not(.o_list_record_selector) {
             &:not(.o_handle_cell):not(.o_list_button):not(.o_list_record_remove):not(.o_list_record_open_form_view) {
-                @include o-text-overflow(table-cell);
+                --fieldWidget-display: block; // Will affect inner components (see fields.scss)
+
+                display: table-cell;
+                @include text-truncate();
+                vertical-align: middle;
+
                 &.o_list_text {
                     white-space: pre-wrap;
                 }