ENGCOM-2505: [Forwardport] Fix for Magnifier in inside mode #17052

Author: Stanislav Idolov

app/design/frontend/Magento/luma/etc/view.xml

@@ -232,6 +232,7 @@
             <var name="height"></var> <!-- Height of magnifier block -->
             <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
             <var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) -->
+            <var name="mode">outside</var> <!-- Zoom type (outside/inside) -->
         </var>
 
         <var name="breakpoints">

lib/web/mage/gallery/gallery.less

@@ -736,24 +736,30 @@
     text-align: center;
     top: 0;
     z-index: @z-index-10;
+    overflow: hidden;
+
+    .magnifier-large {
+        width: auto;
+        height: auto;
+        max-height: none;
+        max-width: none;
+        border: none;
+        position: absolute;
+        z-index: @z-index-1;
+    }
 }
 
 .magnifier-loader-text {
     margin-top: 10px;
 }
 
-.magnifier-large {
-    position: absolute;
-    width: 32%;
-    z-index: @z-index-1;
-}
-
 .magnifier-preview {
     bottom: 0;
     left: 58%;
     overflow: hidden;
     padding: 0;
     position: absolute;
+    z-index: 2;
     top: 215px;
     &:not(.hidden) {
         background-color: @color-white;