Suggestion: Challenge Card Content Overflow - Implement Scrollable Cards

[Zahed-Riyaz]

I've noticed an issue on the main challenges page that I'd like to address.
The content within the challenge cards on the main challenges page sometimes overflows the card's container, causing the end date an other information, to be cut off. This makes it difficult for users to get a complete overview of the challenge details at a glance.

Steps to Reproduce:

1. Navigate to the main challenges page (/web/challenges/list).

2. Observe the challenge cards. Cards with longer challenge names or with a long end date may have content overflowing.

Expected Behavior:
All the text in the challenge cards can be seen by a visitor.

Observed Behavior:
I've observed the end date and other content being cut off. This is bad for UX. See screenshot for an example.

Proposed Solution:
Implement a scrollable area within the challenge card content to accommodate longer text strings. This would allow users to scroll vertically to view all the information, preventing content from being cut off. Applying CSS rule overflow-y: auto; height:200px; (or any suitable height desired).

Would you like me to create a pull request with this change? I just need to be assigned the issue and I'd be happy to commit the code