[FIX] web: resize lists in form: both lists extended

Have two x2many lists in a group in a form view. Increase the
width of a column in the first table. Before this commit, the
second table was also expanded.

task-2189968

closes odoo/odoo#47652

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Co-authored-by: Mohammed Shekha <msh@odoo.com>

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

@@ -1703,6 +1703,11 @@ ListRenderer.include({
             'mouseup',
         ];
 
+        // Fix container width to prevent the table from overflowing when being resized
+        if (!this.el.style.width) {
+            this.el.style.width = `${initialTableWidth}px`;
+        }
+
         // Apply classes to table and selected column
         table.classList.add('o_resizing');
         resizingColumnElements.forEach(el => el.classList.add('o_column_resizing'));

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

@@ -9464,6 +9464,54 @@ QUnit.module('Views', {
         list.destroy();
     });
 
+    QUnit.test('resize column with several x2many lists in form group', async function (assert) {
+        assert.expect(3);
+
+        this.data.bar.fields.text = {string: "Text field", type: "char"};
+        this.data.foo.records[0].o2m = [1, 2];
+
+        const form = await createView({
+            View: FormView,
+            model: 'foo',
+            data: this.data,
+            arch: `
+                <form>
+                    <group>
+                        <field name="o2m">
+                            <tree editable="bottom">
+                                <field name="display_name"/>
+                                <field name="text"/>
+                            </tree>
+                        </field>
+                        <field name="m2m">
+                            <tree editable="bottom">
+                                <field name="display_name"/>
+                                <field name="text"/>
+                            </tree>
+                        </field>
+                    </group>
+                </form>`,
+            res_id: 1,
+        });
+
+        const th = form.el.getElementsByTagName('th')[0];
+        const resizeHandle = th.getElementsByClassName('o_resize')[0];
+        const firstTableInitialWidth = form.el.querySelectorAll('.o_field_x2many_list table')[0].offsetWidth;
+        const secondTableInititalWidth = form.el.querySelectorAll('.o_field_x2many_list table')[1].offsetWidth;
+
+        assert.strictEqual(firstTableInitialWidth, secondTableInititalWidth,
+            "both table columns have same width");
+
+        await testUtils.dom.dragAndDrop(resizeHandle, form.el.getElementsByTagName('th')[1], { position: "right" });
+
+        assert.notEqual(firstTableInitialWidth, form.el.querySelectorAll('thead')[0].offsetWidth,
+            "first o2m table is resized and width of table has changed");
+        assert.strictEqual(secondTableInititalWidth, form.el.querySelectorAll('thead')[1].offsetWidth,
+            "second o2m table should not be impacted on first o2m in group resized");
+
+        form.destroy();
+    });
+
     QUnit.test('enter edition in editable list with <widget>', async function (assert) {
         assert.expect(1);