Fix long/many topics layout in challenge card

[rrchai]

• fixes #291

[tschaffter]

@vpchung - See above. Do you have suggestion on how to handles lots of topics?

I saw somewhere that @rrchai is targetting to have challenge cards that have the same heights, but is it really what we want? This could have been a requirement if we display multiple challenge cards on one line, but currently they appear one on top of another. Therefore it may not really matter if they have different height? Not having the same height contraint could allow us to display all the topics we want.

[vpchung]

@rrchai @tschaffter we can approach it similar to LinkedIn with a "Show more" button, e.g.

If you're unfamiliar, LinkedIn allows users to choose the top 3 they want to showcase/pin at the top, which I think is a nice way to display and use a limitless amount of tags:

[rrchai]

Thank you @tschaffter @vpchung. It is helpful brainstorming. If I integrate ideas from all of us, here are three proposals:

Let's assume a challenge can have 50 tag:

• Show only the first N tags in the container (when we can better handle tags, e.g. ontology or number of tags searched, we can replace with the most related/popular tags)
• Like @Verena suggests, make tags container expansive with the arrow + descriptive text, like "more" on the right. Material expansion probably can achieve this
• Depending on the tags length, the expanded container should only display some of these tags in a fixed height, e.g M extra tags. If the expanded container cannot include all the tags (the other, we should have a "show more" button that redirects to the challenge detail page to see the rest 50 - N - M

Alternatively simpler solutions:

1. Without the second bullet point above, do not show any tags in the initial rendered card, users can click expand button to see tags.
2. With some tags displayed initially, instead of using expansion, just add button/text (+(50-N)) on the right of tags container and redirect to the challenge detail page, like @tschaffter suggests.

[tschaffter]

I just had a look at GH and they don't enforce challenge card to have the same height.

EDIT: I would adopt a similar approach for now. We can revisit this design when we review the challenge card design together.

[rrchai]

@tschaffter @vpchung As we discussed in the meeting, the card now has flexible heights and displays all the tags.