[FIX] web: ignore !important % width/height on dragged elements

This commit fixes an issue in draggable_hook_builder where elements with
!important percentage-based width or height styles would be incorrectly
sized when dragged. The sizing would be computed relative to the document
rather than the style computed by the hook.

To address this, the hook now applies max-width and max-height styles
explicitly. This helps enforce correct sizing and prevents !important
rules from interfering with the visual consistency of dragged elements.

The issue was first spotted in the actions kanban view present in the
automation rules form view.

task-4891808

closes odoo#220565

X-original-commit: fd2dee1
Signed-off-by: Bruno Boi (boi) <boi@odoo.com>

Author: juliusc2066

addons/web/static/src/core/utils/draggable_hook_builder.js

@@ -500,15 +500,14 @@ export function makeDraggableHook(hookParams) {
                 state.willDrag = false;
 
                 // Compute scrollable parent
-                const isDocumentScrollingElement = ctx.current.container
-                    === ctx.current.container.ownerDocument.scrollingElement;
+                const isDocumentScrollingElement =
+                    ctx.current.container === ctx.current.container.ownerDocument.scrollingElement;
                 // If the container is the "ownerDocument.scrollingElement",
                 // there is no need to get the scroll parent as it is the
                 // scrollable element itself.
                 // TODO: investigate if "getScrollParents" should not consider
                 // the "ownerDocument.scrollingElement" directly.
-                [ctx.current.scrollParentX, ctx.current.scrollParentY] =
-                    isDocumentScrollingElement
+                [ctx.current.scrollParentX, ctx.current.scrollParentY] = isDocumentScrollingElement
                     ? [ctx.current.container, ctx.current.container]
                     : getScrollParents(ctx.current.container);
 
@@ -525,6 +524,9 @@ export function makeDraggableHook(hookParams) {
                     dom.addStyle(ctx.current.element, {
                         width: `${width}px`,
                         height: `${height}px`,
+                        // Limit the impact of width and height !important on the dragged element
+                        "max-width": `${width}px`,
+                        "max-height": `${height}px`,
                         position: "fixed !important",
                     });
 

addons/web/static/tests/core/utils/draggable.test.js

@@ -341,12 +341,12 @@ test("Dragging element with touch event: initiation delay can be overrided", asy
 });
 
 test.tags("desktop");
-test("Elements are confined within their container", async () => {
+test("Elements are confined within their container and keep their initial width and height", async () => {
     class List extends Component {
         static template = xml`
-            <div t-ref="root" class="root">
+            <div t-ref="root" class="root" style="width: 800px; height: 600px;">
                 <ul class="list list-unstyled m-0 d-flex flex-column">
-                    <li t-foreach="[1, 2, 3]" t-as="i" t-key="i" t-esc="i" class="item w-50" />
+                    <li t-foreach="[1, 2, 3]" t-as="i" t-key="i" t-esc="i" class="item w-50 h-100" />
                 </ul>
             </div>
         `;
@@ -363,6 +363,7 @@ test("Elements are confined within their container", async () => {
     await mountWithCleanup(List);
 
     const containerRect = queryRect(".root");
+    const { width: initialWidth, height: initialHeight } = queryRect(".item:first");
 
     const { moveTo, drop } = await contains(".item:first").drag({
         initialPointerMoveDistance: 0,
@@ -384,6 +385,11 @@ test("Elements are confined within their container", async () => {
         y: containerRect.y + containerRect.height - queryRect(".item:first").height,
     });
 
+    expect(".item:first").toHaveRect({
+        width: initialWidth,
+        height: initialHeight,
+    });
+
     await moveTo(".item:last-child", {
         position: { x: 9999, y: 9999 },
     });