@uppy/dashboard - made added-files previews look more proportional

[lakesare]

Was:

Now:

[lakesare]

@arturi, do you think that's enough? (That's the widest they'll be)

[arturi]

129px vs 130px? I’m guessing there’s a reason, that’s why I’m asking, so I can keep that in the back of my head for future refactors.

[lakesare]

Exactly, 129px is intentional, in that it's exactly the height that makes 1-line filenames and 2-line filenames not affect the height of the image. Here is an exaggerated example of height>129px:

[arturi]

Thank you!

What about:

1. Removing height from .uppy-DashboardItem (for all sizes).
2. Setting height in .uppy-size--md .uppy-DashboardItem-preview to 135px.

Just tried this and it seems to work great. Maybe I missed something?

[lakesare]

We need the height set, otherwise flex won't be stacking up images well: .

[lakesare]

Hold on, I'll make it less wide.

[lakesare]

Widest now:

[arturi]

Nice! I like the sizes 👍 Thanks for updating.

Noticed this in Firefox 🙀:

Thinking if we can make the height of the of the preview fixed, so it doesn’t change depending on the height of the filename line? It shrinks because of flex, right?

[lakesare]

It shrinks because of flex, right?

Right.
Can't reproduce this issue in firefox, but I added flex-shrink: 0 to the image, this should compensate for tiny differences in font, or what was causing that glitch in firefox.

Here is the widest screen now:

[arturi]

Nice! Thanks.

Made a small suggestion tweak, to go from this height:

To this:

And make the numbers even, but again, maybe I’ve missed something and it breaks the layout? In my tests it was fine.

[lakesare]

@arturi, it's fine in my tests too, looks better to me.

[arturi]

Ok, cool. There’s another suggestion for height: 152px --> height: 140px that didn’t make it into you commit, did you mean you tested with that?

[lakesare]

Oh no, pulled that change too now. Tested it with firefox, safari and chrome, - everything looks good.

[arturi]

Awesome, merged! Thanks.