Conditionally pad images of different height

I've been debugging a diff view where the top parts of the before and
after images are the same, but the before version has 100px whitespace
below the content. I assumed that the images would be aligned from
the top but the diff image ended looking like all the pixels were
different. I found that in this particular case, moving the alignArray
padding to the bottom fixes the issue. In other cases though, padding
should be at the top. I used a rule-of-thumb here -- if the top row is
equal between the two images, pad at the bottom. If not, pad at the top.

I believe this commit makes the long-example better as well, and should
improve things for a lot of diffs out there.

Author: trotzig

snapshots/long-example/diff.png

@@ -116,7 +116,15 @@ function applySolution(solution, a, b) {
   const aLength = a.length;
   const bLength = b.length;
   const shorterArray = aLength > bLength ? b : a;
-  shorterArray.splice(0, 0, ...placeholders(Math.abs(aLength - bLength)));
+  if (a[0] === b[0]) {
+    shorterArray.splice(
+      shorterArray.length - 1,
+      0,
+      ...placeholders(Math.abs(aLength - bLength)),
+    );
+  } else {
+    shorterArray.splice(0, 0, ...placeholders(Math.abs(aLength - bLength)));
+  }
 }
 
 /**