[FIX] web: list: limit selector column to 40px

There is a not that simple logic involving column widths in list
views, in order to optimize the space available for columns with
arbitrary long content (e.g. char or many2one fields). For that
reason, some columns have a fixed width. Before this commit, the
first column, containing record selectors, had no fixed width,
whereas it should be set to 40px.

This commit also renames o_list_controller.scss into
o_list_renderer.scss as this file only contains renderer rules.

closes odoo/odoo#100522

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

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

@@ -105,6 +105,10 @@
             user-select: none;  // Prevent unwanted selection while sorting
         }
 
+        .o_list_record_selector {
+            width: 40px;
+        }
+
         .o_list_record_remove, .o_handle_cell {
             width: 1px;  // to prevent the column to expand
         }

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

@@ -3168,11 +3168,20 @@ QUnit.module("Views", (hooks) => {
                     </tree>`,
                 limit: 2,
             });
-            var widthPage1 = target.querySelector(`th[data-name=foo]`).offsetWidth;
+
+            assert.strictEqual(
+                target.querySelector("thead .o_list_record_selector").offsetWidth,
+                40
+            );
+            const widthPage1 = target.querySelector(`th[data-name=foo]`).offsetWidth;
 
             await pagerNext(target);
 
-            var widthPage2 = target.querySelector(`th[data-name=foo]`).offsetWidth;
+            assert.strictEqual(
+                target.querySelector("thead .o_list_record_selector").offsetWidth,
+                40
+            );
+            const widthPage2 = target.querySelector(`th[data-name=foo]`).offsetWidth;
             assert.ok(
                 widthPage1 > widthPage2,
                 "column widths should be computed dynamically according to the content"
@@ -13734,19 +13743,21 @@ QUnit.module("Views", (hooks) => {
                 </tree>`,
         });
 
-        // Target handle
+        const originalWidths = [...target.querySelectorAll(".o_list_table th")].map(
+            (th) => th.offsetWidth
+        );
         const th = target.querySelector("th:nth-child(2)");
         const resizeHandle = th.querySelector(".o_resize");
-        const originalWidth = th.offsetWidth;
-        const expectedWidth = Math.floor(originalWidth / 2 + resizeHandle.offsetWidth / 2);
-
+        const expectedWidth =
+            Math.round(originalWidths[1] / 2) + Math.round(resizeHandle.offsetWidth / 2);
         await dragAndDrop(resizeHandle, th);
 
-        assert.strictEqual(
-            th.style.width,
-            `${expectedWidth}px`,
-            "header width should be halved (plus half the width of the handle)"
+        const finalWidths = [...target.querySelectorAll(".o_list_table th")].map(
+            (th) => th.offsetWidth
         );
+        assert.strictEqual(finalWidths[0], originalWidths[0]);
+        assert.ok(Math.abs(finalWidths[1] - expectedWidth) <= 1); // rounding
+        assert.strictEqual(finalWidths[2], originalWidths[2]);
     });
 
     QUnit.test("editable list: resize column headers with max-width", async function (assert) {