Fix tags overflowing outside the card

[44yu5h]

Fixes #34

New behaviour:

[44yu5h]

I realised the empty space on the left was for the size of the package.

I tried using ellipsis, but its behaviour was not consistent since there can be multiple tags

[kelson42]

We should have also css elipsis

[rgaudin]

@44yu5h thank you ; can you please check how it looks like at every screen dimension? There are a lot of differences at different sizes and you mx might not work for all use cases (haven't looked at it though).

As @kelson42 suggests (I think), the cut-out is a bit harsh and a visual clue that the text is too long would possibly be better. We do use ellipsis on title if it's too long so I guess we could use it here as well. Simply setting the width and the overflow ellipsis does it.

@siemsie would an ellipsis be OK?

[siemsie]

Hi everyone. I imagined something like this. Thank you.

[44yu5h]

rgaudin ~ can you please check how it looks like at every screen dimension?

Okay, will do!

@siemsie Wow! These edits look so good. Which software do you use?

I'll add the multiline support, ellipsis, tooltip, and increase the maximum number of tags (currently set to 2)

[siemsie]

Hi @44yu5h. Thanks – I use Adobe Illustrator, useful tool for quick solutions like this, although not too useful for web.

[44yu5h]

Updated behavior:

• Responsive design for different screen sizes
• Tooltip
• Ellipsis
• 2 lines wrap
• Multiple tags

[44yu5h]

I also noticed the number of columns as 3 for both md and lg. Might it have been a typo?
Seems it should rather be md:grid-cols-2m and behaves better after the change

        sm:grid-cols-1m
        md:grid-cols-3m
        lg:grid-cols-3m
        xl:grid-cols-4m
        2xl:grid-cols-5m

[siemsie]

Could you align the tags to the full width of the box, as model above. Thanks

[44yu5h]

@siemsie ~ Could you align the tags to the full width of the box, as model above

I think that space was reserved for the file size of the item. It was already there so I am guessing we had plans of showing that in the future?

Let me know if you'd still want me to remove the space.

[rgaudin]

@44yu5h the size is now gone (see #25) hence the use of that space in @siemsie's mockup

[44yu5h]

@rgaudin Removed the extra space.

Let me know if everything is alright now. Thanks

[rgaudin]

@44yu5h sorry about the loooooonnng delay in replying. I had the notification aside for review and must have cleared it at some point.

It doesn't work as suggested: there's no space between tags and there's a huge blank space below on every card now.