Member cards are not always aligned well

[austingmhuang]

Due to the varying heights of member cards, the layout of the cards can look quite disorganized e.g. messy.

Below is an image example for 3 columns.

Below is for 2 columns.

One solution is to make member cards all the same height. I.e. you compress the text inside to fit within the cards.
Or... idk, I am sure there are ways to make this look more neat though.

[Naphann]

My quick fix solution would be on the JS post-processing part, although I have no experience with the framework we're using, by calculating the tallest and/or widest card, and then resizing all other cards to have the same dimension.

Not sure if there's a built-in better solution with the framework itself. @PorametPat Any ideas?

[Naphann]

Another one, although still not the best, would be to restrict the tag(?) to 2-3 lines and make it scrollable. Not the prettiest option but might make people with fewer tags look clean.

[austingmhuang]

All the cards have the same width right now. I think calculating based on the tallest card and resizing that way would probably end up creating a lot of dead space on member cards with less detail, so I'm not sure that's a good workaround. That's doable in React/Tailwind-css (The framework & css library we're using) though.

You could also potentially lower the font-size of the text as the amount of tags/text increases in each member card to reduce the size of cards. And/or, impose a character/tag limit.

The cleanest solution (to conserve space) I can think of is to restrict the individual links (meaning those to instagram, github, etc...) to those with logos. E.g. for github rather than the text "GITHUB" you would have the github logo instead. But then that also sacrifices the ability for people to link to their personal blogs/ietf/, so...

[Naphann]

How about we limit the space to show them, if someone has more than the available space put a "more" or "+x" label, and also make each card clickable to see a popup with a full detail. That would be additional work and functionality though.

Unless we do want to add more things to the popup (detailed profile view), this would still be a little weird for most cards.

[austingmhuang]

Well instead of a pop-up ideally it would just lengthen the card I would image. Maybe something like this?
From this...

To this...

(For more info/inspiration: https://m2.material.io/components/cards#behavior)

Although I guess the question would be how would you organize the cards after one is lengthened?

[Naphann]

Yeah, it would push the cards below down. That's why I was thinking about popups.

Another possibility is to stack the cards without having space between them. Only the first row cards are top align and the rest just push up to the top cards. Could be a little messy or if we have multiple sizes it would look more like a tiling tetris/puzzle.

[austingmhuang]

Could look something like this? Top aligned and just pushes down when extended but leaves the rest intact.

cardextension.mp4

[Naphann]

Yeah, that looks good. I like it. But that would also mean that we need the stacking like I mentioned above right? Only the first row is top aligned then we stack the rest without having space. So we wouldn't have a concept of second or more row anymore.

[austingmhuang]

Yeah exactly. Though this is a bit more advanced so I am going to remove the good-first-issue label lol.

[austingmhuang]

I toyed around with this for a while and I have it working like this...

Which imo looks a bit better than the previous design. But it's not quite what we envisioned however...

[PorametPat]

This is temporary fixed in the latest merged. But might not the desired solution as when you toggle more details button, the card will wrap such that each column has equally same height.