[FIX] web: resize only target column in list view + test

Steps to reproduce:

  ! Chrome version >= 91.0.4472.114 (no issue on <= 90.0.4430.51)
  - Install Accounting module
  - Go to Customer Invoices and create a new one
  - Add a customer with a very long name, add product then save
  - Go back to list view
  - Ensure that the column "Customer" does not display the full
    customer name
  - Try to resize "Customer" column

Issue:

  All columns are resized.

Cause:

  Since Chrome 91.0.4472.114, `max-width` on column cause
  an issue with table.
  The issue is triggerd when a <th> width size
  exceeds the maxWidth size.
  Also, when resizing, the maxWidth of current collumn stays the same.

Solution:

  On resizing, update also, maxWidth with new width value.

opw-2585307

closes odoo/odoo#74649

X-original-commit: 0cc1a5863a1dee27ab5b8500c6de75628f1c441c
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Signed-off-by: bon-odoo <nboulif@users.noreply.github.com>

addons/web/static/src/legacy/js/views/list/list_editable_renderer.js

@@ -1766,6 +1766,7 @@ ListRenderer.include({
             const newWidth = Math.max(10, initialWidth + delta);
             const tableDelta = newWidth - initialWidth;
             th.style.width = `${newWidth}px`;
+            th.style.maxWidth = `${newWidth}px`;
             table.style.width = `${initialTableWidth + tableDelta}px`;
             if (optionalDropdown) {
                 optionalDropdown.style.left = `${initialDropdownX + tableDelta}px`;

addons/web/static/tests/legacy/views/list_tests.js

@@ -11613,6 +11613,44 @@ QUnit.module('Views', {
         list.destroy();
     });
 
+    QUnit.test('editable list: resize column headers with max-width', async function (assert) {
+        // This test will ensure that, on resize list header,
+        // the resized element have the correct size and other elements are not resized
+        assert.expect(2);
+        this.data.foo.records[0].foo = "a".repeat(200);
+
+        var list = await createView({
+            View: ListView,
+            model: 'foo',
+            data: this.data,
+            arch: '<tree editable="top">' +
+                    '<field name="foo"/>' +
+                    '<field name="bar"/>' +
+                    '<field name="reference" optional="hide"/>' +
+                '</tree>',
+        });
+
+        // Target handle
+        const th = list.el.getElementsByTagName('th')[1];
+        const thNext = list.el.getElementsByTagName('th')[2];
+        const resizeHandle = th.getElementsByClassName('o_resize')[0];
+        const nextResizeHandle = thNext.getElementsByClassName('o_resize')[0];
+        const thOriginalWidth = th.offsetWidth;
+        const thNextOriginalWidth = thNext.offsetWidth;
+        const thExpectedWidth = Math.floor(thOriginalWidth + thNextOriginalWidth);
+
+        await testUtils.dom.dragAndDrop(resizeHandle, nextResizeHandle, { mousemoveTarget: window, mouseupTarget: window });
+
+        const thFinalWidth = th.offsetWidth;
+        const thNextFinalWidth = thNext.offsetWidth;
+        const thWidthDiff = Math.abs(thExpectedWidth - thFinalWidth)
+
+        assert.ok(thWidthDiff <= 1, "Wrong width on resize");
+        assert.ok(thNextOriginalWidth === thNextFinalWidth, "Width must not have been changed");
+
+        list.destroy();
+    });
+
     QUnit.test('resize column with several x2many lists in form group', async function (assert) {
         assert.expect(3);