1 files changed, 8 insertions, 10 deletions
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
index c3cfe54eb4d..57f373fca21 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
@@ -25,7 +25,7 @@ export default {
       swipeMaxWidth: undefined,
       swipeMaxHeight: undefined,
       swipeBarPos: 1,
-      swipeWrapWidth: undefined,
+      swipeWrapWidth: 0,
     };
   },
   computed: {
@@ -63,7 +63,7 @@ export default {
         leftValue = clientWidth - spaceLeft;
       }
 
-      this.swipeWrapWidth = this.swipeMaxWidth - leftValue;
+      this.swipeWrapWidth = (leftValue / clientWidth) * 100;
       this.swipeBarPos = leftValue;
     },
     startDrag() {
@@ -81,7 +81,6 @@ export default {
         // Add 2 for border width
         this.swipeMaxWidth =
           Math.max(this.swipeOldImgInfo.renderedWidth, this.swipeNewImgInfo.renderedWidth) + 2;
-        this.swipeWrapWidth = this.swipeMaxWidth;
         this.swipeMaxHeight =
           Math.max(this.swipeOldImgInfo.renderedHeight, this.swipeNewImgInfo.renderedHeight) + 2;
 
@@ -107,10 +106,6 @@ export default {
   <div class="swipe view">
     <div
       ref="swipeFrame"
-      :style="{
-        'width': swipeMaxPixelWidth,
-        'height': swipeMaxPixelHeight,
-      }"
       class="swipe-frame">
       <image-viewer
         key="swipeOldImg"
@@ -123,14 +118,17 @@ export default {
       <div
         ref="swipeWrap"
         :style="{
-          'width': swipeWrapPixelWidth,
-          'height': swipeMaxPixelHeight,
+          width: `${swipeWrapWidth}%`
         }"
-        class="swipe-wrap">
+        class="swipe-wrap"
+      >
         <image-viewer
           key="swipeNewImg"
           :render-info="false"
           :path="newPath"
+          :style="{
+            width: swipeMaxPixelWidth 
+          }"
           class="frame added"
           @imgLoaded="swipeNewImgLoaded"
         >