[FIX] web: reposition popover when image is loaded

When hovering over an employee's photo (without edit rights) and the
image hasn't been loaded in the cache, the popover is positioned to the
right of the image. With a big image, the popover can be outside of the
page.

Steps to reproduce:
1. Install Employees and set a 4k image to any employee
2. Remove all the rights of Marc Demo on Employees
3. Connect as Marc Demo
4. Open the form of the employee with the 4k image
5. Hover on the employee photo
6. The image position is off

Solution:
Update the position of the popover when the image is loaded and restrict
the image width in the popover to the popover width

Problem:
When we try to find the best position to display the popover and the
image is not loaded, we will find that there is some room for the
popover on the right because the image has no height or width

opw-3281649

closes odoo/odoo#125951

X-original-commit: 532c4cfa4e60bc95319b774794680eabc80b1219
Signed-off-by: Bruno Boi (boi) <boi@odoo.com>
Signed-off-by: Guillaume Merlin (megu) <megu@odoo.com>

addons/web/static/src/core/position_hook.js

@@ -339,9 +339,11 @@ export function usePosition(target, options) {
             // Attach listeners to keep the positioning up to date
             const targetDocument = getTarget()?.ownerDocument;
             targetDocument?.addEventListener("scroll", throttledUpdate, { capture: true });
+            targetDocument?.addEventListener("load", throttledUpdate, { capture: true });
             window.addEventListener("resize", throttledUpdate);
             return () => {
                 targetDocument?.removeEventListener("scroll", throttledUpdate, { capture: true });
+                targetDocument?.removeEventListener("load", throttledUpdate, { capture: true });
                 window.removeEventListener("resize", throttledUpdate);
             };
         }

addons/web/static/src/views/fields/image/image_field.scss

@@ -22,7 +22,7 @@
 
 .o_image_zoom {
     img {
-        max-width: 50vw;
+        max-width: 100%;
         max-height: 50vh;
     }
 }

addons/web/static/tests/core/position_hook_tests.js

@@ -333,6 +333,18 @@ QUnit.test("has no effect when component is destroyed", async (assert) => {
     );
 });
 
+QUnit.test("reposition popper when a load event occurs", async (assert) => {
+    const TestComp = getTestComponent({
+        onPositioned: () => {
+            assert.step("onPositioned called");
+        },
+    });
+    await mount(TestComp, container);
+    assert.verifySteps(["onPositioned called"], "onPositioned called when component mounted");
+    await document.querySelector('[id="popper"]').dispatchEvent(new Event("load"));
+    assert.verifySteps(["onPositioned called"], "onPositioned called when load event is triggered");
+});
+
 QUnit.test("is positioned relative to its containing block", async (assert) => {
     const fixtureBox = getFixture().getBoundingClientRect();
     // offset the container