Fixed the dimensions of image diffs

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/54236

4 files changed, 12 insertions, 35 deletions

diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
index 6f2f0f98690..05f9f960934 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
@@ -34,14 +34,7 @@ export default {
     fileSizeReadable() {
       return numberToHumanSize(this.fileSize);
     },
-    dimensionStyles() {
-      if (!this.isLoaded) return {};
 
-      return {
-        width: `${this.width}px`,
-        height: `${this.height}px`,
-      };
-    },
     hasFileSize() {
       return this.fileSize > 0;
     },
@@ -89,7 +82,6 @@ export default {
   <div>
     <div
       :class="innerCssClasses"
-      :style="dimensionStyles"
       class="position-relative"
     >
       <img
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"
         >
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue
index 9806d65e940..aafa88f4ff1 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue
@@ -19,18 +19,18 @@ export default {
 </script>
 
 <template>
-  <div class="two-up view">
+  <div class="two-up view d-flex">
     <image-viewer
       :path="oldPath"
       :render-info="true"
       inner-css-classes="frame deleted"
-      class="wrap"
+      class="wrap w-50"
     />
     <image-viewer
       :path="newPath"
       :render-info="true"
       :inner-css-classes="['frame', 'added']"
-      class="wrap"
+      class="wrap w-50"
     >
       <slot
         slot="image-overlay"
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 3c7bf0b0e46..0163c795074 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -253,19 +253,6 @@
         right: 7px;
       }
 
-      .frame {
-        top: 0;
-        right: 0;
-        position: absolute;
-
-        &.deleted {
-          margin: 0;
-          display: block;
-          top: 13px;
-          right: 7px;
-        }
-      }
-
       .swipe-bar {
         display: block;
         height: 100%;
@@ -435,7 +422,7 @@
     .onion-skin.view {
       .swipe-wrap {
         top: 0;
-        right: 0;
+        left: 0;
       }
 
       .frame.deleted {