Diffs of very small images are hard to read (2-up) or unusable (onion skin)

Describe the bug

Diffs of images with very small widths are unreadable for 2-up mode: They cause the “Deleted” and “Added” text to overlap and the file stats to merge together.

The same diffs are entirely unusable in “onion skin” mode: They cause the slider to be way too small to use (it allows you to drag it to the right and then the slider can no longer be moved at all.)

Version & OS

Version 2.6.2, Windows … Version 3.0.5, Windows

Steps to reproduce the behavior

Add an image with a small width to a repository and look at the diff. To save you some time, here’s a couple 16x16 slime sprites:

Expected behavior

There should be a minimum width on the sides of the diff that prevents any of this overlapping. Here’s an example of CSS that could potentially be added to fix this:

/* Fix 2-up image diffs having no minimum size and as a result being incomprehensible */
.panel.image .image-diff-two-up :is(.image-diff-previous, .image-diff-current) {
    min-width: 200px;
}

/* Fix swipe/onion skin image diff slider min-width */
:is(.image-diff-swipe, .image-diff-onion-skin) .slider {
    min-width: 200px;
}

Which produces:

I would assume you would want to do it via variable and stuff, though, so a hardcoded rule like this probably wouldn’t work. Just showing that it can be solved without too many CSS changes 😃

[ChiriVulpes]

1. Create repository.
2. Add one of those small images to the repository.
3. Commit.
4. Replace the small image with the other one.
5. Look at the diff.

[ChiriVulpes]

I’ve updated this issue with further information and updated suggestions.

• It’s not just 2-up that’s got issues at diffs this small, Onion Skin is also broken (it actually doesn’t even work)
• Updated suggested CSS to also set a minimum slider width in swipe/onion skin modes

I’ll also note that when comparing a diff of a small, transparent, white icon, you legitimately just can’t see anything in the diff at all (that’s also visible in the onion skinning screenshot above). I don’t know if that’s worth fixing, but I fixed it in my local stylesheet by just getting rid of the tiled background since it doesn’t work in my use case (and it’s honestly painful on the eyes in dark mode for larger images anyway) and replacing it with the background colour (which is much less likely to be the same as an image I’m working on than pure white)

/* Remove white background behind images in image diff */
:is(.image-diff-onion-skin, .image-diff-swipe) .sizing-container .image-container, .panel.image :is(.image-diff-previous, .image-diff-current) img {
    background-image: none;
    background: var(--background-color) !important;
}