Card items overflow out of cards

[mtlaso]

Details

Steps

1. Visit someone's profile (https://app.codecrafters.io/users/rohitpaulk)
2. Look into the challenges section
3. Some icons are overflowing out of their card (when a challenge has been solved with multiple languages)

(firefox)

(chromium)

Proposed solution

Make sure the icons don't overflow

[rohitpaulk]

Spec for solution: let's pick upto 3 languages. Prioritize based on this ordered list:

• Completed languages, sorted by last activity
• Incomplete languages, sorted by last activity

[yuvrajkarna2717]

"Hi @rohitpaulk, is this issue still relevant to work on? If yes, could you provide more details or context to help improve it?

[rohitpaulk]

@yuvrajkarna2717 yep! We should limit to 3 icons, you'll find the spec above here: #1768 (comment)

[Wassaf001]

Hey, what should I add in .env, backend url?

This should match the URL defined in core.

BACKEND_URL="https://-backend.ccdev.dev"

[ryan-gang]

You can use our staging server to develop against.
BACKEND_URL="https://backend-staging.codecrafters.io"

[Wassaf001]

ok thanks

[rohitpaulk]

Added this to our default .env.example here: #2639

[Wassaf001]

I am wondering, how can I check my code is working or not, as I cannot reproduce the bug.

Any help please.

[rohitpaulk]

@Wassaf001 you can try editing this file to mimic the scenario: https://github.com/codecrafters-io/frontend/blob/main/tests/acceptance/view-user-profile-test.js. You can add pauseTest() as described here to see the UI in the middle of a test.

[Wassaf001]

ok thank you.

[Wassaf001]

According to the spec mentioned here:

Spec for solution: let's pick upto 3 languages. Prioritize based on this ordered list:

• Completed languages, sorted by last activity
• Incomplete languages, sorted by last activity

This is my progress.

Is it ready for a PR?