[FIX] web: list: don't squeeze button columns

Adjacent buttons are not displayed in a single column. When the
table overflows, we try to squeeze largest columns to make it fit
into its container (in this case, text may be clipped and an
ellipsis is displayed). Button columns didn't get away from this.

As a consequence, now that a cell may contain several buttons,
some of them may be clipped and replaced by the ellipsis, which
isn't what we want for buttons.

This commit removes the button columns from the list of columns
to squeeze, so we let the browser reduce them as much as it can,
and we keep them as they are.

Task 2282470

closes odoo/odoo#54258

X-original-commit: e00960daa3ed3d1fd3a7572b2acedd3d2fb0448e
Signed-off-by: Julien Mougenot (jum) <jum@odoo.com>
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

3 files changed, 18 insertions, 8 deletions

diff --git a/addons/web/static/src/js/views/list/list_editable_renderer.js b/addons/web/static/src/js/views/list/list_editable_renderer.js
index 818be2f350a..1f13eabfa42 100644
--- a/addons/web/static/src/js/views/list/list_editable_renderer.js
+++ b/addons/web/static/src/js/views/list/list_editable_renderer.js
@@ -1335,7 +1335,9 @@ ListRenderer.include({
      * Set a maximum width on the largest columns in the list in case the table
      * is overflowing. The idea is to shrink largest columns first, but to
      * ensure that they are still the largest at the end (maybe in equal measure
-     * with other columns).
+     * with other columns). Button columns aren't impacted by this function, as
+     * we assume that they can't be squeezed (we want all buttons to always be
+     * available, not being replaced by ellipsis).
      *
      * @private
      * @returns {integer[]} width (in px) of each column s.t. the table doesn't
@@ -1363,7 +1365,7 @@ ListRenderer.include({
             return thresholdReached;
         };
         // Sort columns, largest first
-        const sortedThs = [...thead.getElementsByTagName('th')]
+        const sortedThs = [...thead.querySelectorAll('th:not(.o_list_button)')]
             .sort((a, b) => getWidth(b) - getWidth(a));
         const allowedWidth = table.parentNode.offsetWidth;
 
diff --git a/addons/web/static/src/js/views/list/list_renderer.js b/addons/web/static/src/js/views/list/list_renderer.js
index aa59598e712..246a83f18a0 100644
--- a/addons/web/static/src/js/views/list/list_renderer.js
+++ b/addons/web/static/src/js/views/list/list_renderer.js
@@ -889,6 +889,9 @@ var ListRenderer = BasicRenderer.extend({
         if (node.attrs.readOnly) {
             $th.addClass('oe_read_only');
         }
+        if (node.tag === 'button_group') {
+            $th.addClass('o_list_button');
+        }
         if (!field || node.attrs.nolabel === '1') {
             return $th;
         }
diff --git a/addons/web/static/src/scss/list_view.scss b/addons/web/static/src/scss/list_view.scss
index 7eea7e98ed2..7774b73a416 100644
--- a/addons/web/static/src/scss/list_view.scss
+++ b/addons/web/static/src/scss/list_view.scss
@@ -28,8 +28,11 @@
             }
         }
         tbody > tr > td:not(.o_list_record_selector) {
-            &:not(.o_handle_cell) {
+            &:not(.o_handle_cell):not(.o_list_button) {
                 @include o-text-overflow(table-cell);
+                &.o_list_text {
+                    white-space: pre-wrap;
+                }
             }
 
             &.o_list_number {
@@ -37,16 +40,18 @@
             }
             &.o_list_text {
                 word-break: break-word;
-                white-space: pre-wrap;
             }
             &.o_list_char.o_color_cell .o_field_color {
                 width: 17px;
                 height: 17px;
             }
-            &.o_list_button > button {
-                padding: 0 5px;
-                &:not(:last-child) {
-                    margin-right: 3px;
+            &.o_list_button {
+                white-space: nowrap;
+                > button {
+                    padding: 0 5px;
+                    &:not(:last-child) {
+                        margin-right: 3px;
+                    }
                 }
             }
         }