fix: overlapping cards

[Skazitron]

Done

• Stop the 2 col card from expanding when screen size gets smaller
• Fixed overlapping cards when screen is resized
• Wrapped cards in grid columns

QA

• Visit the /test link
• Ensure cards don't overlap with one another.

[webteam-app]

Demo

Jenkins

demos.haus

[mattea-turic]

Thanks @Skazitron for this demo page!

Comments:

• On resizing, the aspect ratio of the images should stay the same

• This is very minor, but is there a way we can elevate the chip a little, so for the 4- and 6-col cards, it is at the level of – or above – the image?
  
  

• Could you add a space between the author and the date and the middle dot pls?
  
  

• Could you apply the same thing you've got for the resizing on larger screens, where it matches the ratio/percentage width of the grid – to smaller screens? So four columns = 100%; 2 columns = 50% etc. (it was hard to see whether this was applied in the initial card comp we were reviewing, so seeing it on this demo page is super helpful

[eliman11]

Same comments as Mattea so I'll mark UX-1 and have another look when you've made the updates.

[Skazitron]

This file will be deleted after code review.

[Skazitron]

@mattea-turic pushing the footer up makes messes with the author and date for the 6 column card. As for making the 2 col card responsive based on screen size, the 2 col card has a variant with an image and a fixed height. That makes it impossible.

Update: this has been implemented.

[eliman11]

LGTM thanks for all your hard work @Skazitron!

[mattea-turic]

@Skazitron

Only one change from me – could the desc. interaction be omitted for medium and small breakpoints pls?

But, all else is good tysm for all your patience with this xd

+1ing in advance!