[FIX] web: fix zoomodoo flyout width

Issue

	- Install eCommerce
	- Modify a product image with one which
	  has more than 1024px width/height to
	  enable zoom (I used: https://bit.ly/2VETQZS)
	- Go on the website preview & hover the image

	Depending on the screen size, a part of the
	flyout is hidden because of overflow-x
	if you want to see it, you should scroll
	right width right arrow key.

Cause

	The flyout has 100% width and is put
	right (position absolute, left: 100%)

Solution

	To avoid this error on all screen size,
	the solution is to compute the max-width
	of the flyout depending on the available
	space on the right.

OPW-2283648

closes odoo/odoo#54222

X-original-commit: c89b4c25ed92542f6fd0279cf3a9e4ef1bac9fa5
Signed-off-by: Jason Van Malder (jvm) <jvm@odoo.com>

1 files changed, 5 insertions, 0 deletions

diff --git a/addons/web/static/src/js/libs/zoomodoo.js b/addons/web/static/src/js/libs/zoomodoo.js
index 1eaa4cedd48..a372c1686dc 100644
--- a/addons/web/static/src/js/libs/zoomodoo.js
+++ b/addons/web/static/src/js/libs/zoomodoo.js
@@ -166,6 +166,11 @@ ZoomOdoo.prototype.show = function (e, testMouseOver) {
         }
 
         this.$flyout.css('transform', 'translate3d(' + left + 'px, ' + top + 'px, 0px)');
+    } else {
+        // Computing flyout max-width depending to the available space on the right to avoid overflow-x issues
+        // e.g. width too high so a right zoomed element is not visible (need to scroll on x axis)
+        var rightAvailableSpace = document.body.clientWidth - this.$flyout[0].getBoundingClientRect().left;
+        this.$flyout.css('max-width', rightAvailableSpace);
     }
 
     w1 = this.$target[0].offsetWidth;