2 files changed, 10 insertions, 10 deletions
diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js
index 7a285f1f8d..a26b927c33 100644
--- a/web_src/js/features/imagediff.js
+++ b/web_src/js/features/imagediff.js
@@ -129,8 +129,8 @@ export function initImageDiff() {
         initOverlay(createContext($imageAfter[2], $imageBefore[2]));
       }
 
-      hideElem($container.find('> .loader'));
       $container.find('> .gt-hidden').removeClass('gt-hidden');
+      hideElem($container.find('.ui.loader'));
     }
 
     function initSideBySide(sizes) {
@@ -155,7 +155,7 @@ export function initImageDiff() {
         height: sizes.size1.height * factor
       });
       sizes.image1.parent().css({
-        margin: `${sizes.ratio[1] * factor + 15}px ${sizes.ratio[0] * factor}px ${sizes.ratio[1] * factor}px`,
+        margin: `10px auto`,
         width: sizes.size1.width * factor + 2,
         height: sizes.size1.height * factor + 2
       });
@@ -164,7 +164,7 @@ export function initImageDiff() {
         height: sizes.size2.height * factor
       });
       sizes.image2.parent().css({
-        margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`,
+        margin: `10px auto`,
         width: sizes.size2.width * factor + 2,
         height: sizes.size2.height * factor + 2
       });
@@ -255,13 +255,12 @@ export function initImageDiff() {
         width: sizes.size2.width * factor + 2,
         height: sizes.size2.height * factor + 2
       });
+
+      // some inner elements are `position: absolute`, so the container's height must be large enough
+      // the "css(width, height)" is somewhat hacky and not easy to understand, it could be improved in the future
       sizes.image2.parent().parent().css({
         width: sizes.max.width * factor + 2,
-        height: sizes.max.height * factor + 2
-      });
-      $container.find('.onion-skin').css({
-        width: sizes.max.width * factor + 2,
-        height: sizes.max.height * factor + 4
+        height: sizes.max.height * factor + 2 + 20 /* extra height for inner "position: absolute" elements */,
       });
 
       const $range = $container.find("input[type='range']");
diff --git a/web_src/less/features/imagediff.less b/web_src/less/features/imagediff.less
index a9ba7f8c8f..07763c15e1 100644
--- a/web_src/less/features/imagediff.less
+++ b/web_src/less/features/imagediff.less
@@ -1,6 +1,6 @@
 .image-diff-container {
   text-align: center;
-  padding: 30px 0;
+  padding: 1em 0;
 
   img {
     border: 1px solid var(--color-primary-light-7);
@@ -22,6 +22,7 @@
       display: inline-block;
       line-height: 0;
       vertical-align: top;
+      margin: 0 1em;
 
       .side-header {
         font-weight: bold;
@@ -98,7 +99,7 @@
     }
 
     input {
-      width: 300px;
+      max-width: 300px;
     }
   }
 }