The progress bar that displays during diff computation is designed to be
the width of the image. This is nice because it gives a hint to what
size the resulting diff image is going to be. When the image is wider
than the available screen space however, it gets confusing. I've been
looking at a few (really large) diffs where it looked like progress was
at 100% when it was in fact like 60%. Using a max-width here helps
prevent this.
After being confused that my calc was resulting in the wrong value, I
realized that I was in content-box land (oh the horror). So I added a
general rule to move us over to border-box.
I'm starting to feel the pain of:
not being able to use variables (the 10px must be kept in sync with
other places)
not having styles better attached to the components
not having a css reset (that would have most likely taken care of the
box-sizing issue)
The progress bar that displays during diff computation is designed to be the width of the image. This is nice because it gives a hint to what size the resulting diff image is going to be. When the image is wider than the available screen space however, it gets confusing. I've been looking at a few (really large) diffs where it looked like progress was at 100% when it was in fact like 60%. Using a max-width here helps prevent this.
After being confused that my
calcwas resulting in the wrong value, I realized that I was in content-box land (oh the horror). So I added a general rule to move us over to border-box.I'm starting to feel the pain of: