[FIX] web: list: prevent tables from overflowing

In an editable list, select a very long value in a many2one...

Before this commit, the table stretched as much as it needed to to
display all of the columns content.

Now, the largest columns are trimmed in order to keep the table
as wide as the list container (meaning it won't overflow anymore
unless there is a huge load of columns).

Also ensured that values trimmed by this feature are followed
by an ellipsis.

Task 2068261

Co-authored-by: Aaron Bohy <aab@odoo.com>

1 files changed, 11 insertions, 4 deletions

diff --git a/addons/web/static/src/scss/list_view.scss b/addons/web/static/src/scss/list_view.scss
index 6c3d452fb47..4ee916f9a1f 100644
--- a/addons/web/static/src/scss/list_view.scss
+++ b/addons/web/static/src/scss/list_view.scss
@@ -211,10 +211,6 @@
             .o_list_record_remove_header {
                 width: 32px;
             }
-        &>tbody>tr>td.o_list_char,
-            &>tbody>tr>td.o_list_many2one {
-                white-space: nowrap;
-            }
             // checkboxes in editable lists should be clickable and activate the row
             .o_data_row:not(.o_selected_row) .o_data_cell {
             &.o_toggle_button_cell:not(.o_readonly_modifier) button, // registry: toggle_button
@@ -224,6 +220,17 @@
                 }
             }
 
+            .o_data_row:not(.o_selected_row) {
+                .o_list_many2one,
+                .o_list_char,
+                .o_list_number {
+                    white-space: nowrap;
+                    .o_field_widget {
+                        display: inline;
+                    }
+                }
+            }
+
             .o_data_row.o_selected_row > .o_data_cell:not(.o_readonly_modifier):not(.o_invisible_modifier) {
                 position: relative; // for o_field_translate
                 background-color: white;