decomp.me icon indicating copy to clipboard operation
decomp.me copied to clipboard

Credits page avatars shrink on long names

Open marijnvdwerf opened this issue 2 years ago • 4 comments

image

marijnvdwerf avatar May 16 '23 15:05 marijnvdwerf

Might be an idea to not have them as columns, but have them wrap, just like the buttons below? Would need some more spacing to make it feel less awkward.

image

marijnvdwerf avatar May 16 '23 15:05 marijnvdwerf

I like that, like flexbox space-between or something. Should make sure everything incl the images are flex-shrink: 0 to fix this

bates64 avatar May 16 '23 16:05 bates64

image

I played around in devtools a bit. Something like this looks a lot calmer to me. I added a column-gap: 8px; row-gap: 4px; margin: 0 -8px; to the container, and removed the @ signs. Sorted by people with/without avatars for a more structured look.

Example with @-signs kept: image

marijnvdwerf avatar May 16 '23 17:05 marijnvdwerf

Both look great!

The reason for the @ in the design is to make it inferable that users can type @username in a #128 or description but that isn't actually supported yet, so I don't mind dropping them.

bates64 avatar May 16 '23 21:05 bates64