frontend icon indicating copy to clipboard operation
frontend copied to clipboard
verified publisher icon codecrafters-io

Card items overflow out of cards

Open mtlaso opened this issue 1 year ago • 15 comments

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) firerfox

(chromium) chrome

Proposed solution

Make sure the icons don't overflow

mtlaso avatar May 24 '24 02:05 mtlaso

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

rohitpaulk avatar Jul 29 '24 11:07 rohitpaulk

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

yuvrajkarna2717 avatar Dec 23 '24 16:12 yuvrajkarna2717

@yuvrajkarna2717 yep! We should limit to 3 icons, you'll find the spec above here: https://github.com/codecrafters-io/frontend/issues/1768#issuecomment-2255667285

rohitpaulk avatar Jan 14 '25 01:01 rohitpaulk

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

This should match the URL defined in core.

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

Wassaf001 avatar Feb 11 '25 04:02 Wassaf001

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

ryan-gang avatar Feb 11 '25 05:02 ryan-gang

ok thanks

Wassaf001 avatar Feb 11 '25 17:02 Wassaf001

Added this to our default .env.example here: https://github.com/codecrafters-io/frontend/pull/2639

rohitpaulk avatar Feb 11 '25 20:02 rohitpaulk

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

Any help please.

Wassaf001 avatar Feb 11 '25 20:02 Wassaf001

@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.

rohitpaulk avatar Feb 11 '25 20:02 rohitpaulk

ok thank you.

Wassaf001 avatar Feb 11 '25 20:02 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
Image Image

This is my progress.

Is it ready for a PR?

Wassaf001 avatar Feb 16 '25 11:02 Wassaf001

@Wassaf001 one thing I'm noticing is that in the first screenshot I have three completed languages - PHP, TS and Kotlin, but in the second it only shows 2 (would have expected 3).

Would recommend opening a PR anyway! Easier to share feedback when we have concrete code to look at.

rohitpaulk avatar Feb 17 '25 20:02 rohitpaulk

ok will do that.

Wassaf001 avatar Feb 17 '25 20:02 Wassaf001

I have opened a PR, what is the process further, if any change or improvement is required let me know, I will do it.

Wassaf001 avatar Feb 18 '25 19:02 Wassaf001

Hi, with 4 to 5 years of experience in React, Next, Typescript, Tailwind CSS and core CSS. I have over the years built appealing UI as a person and with teams, i believe that if assign this task i will be able to fix it. Thanks as i look forward to hearing from you

EbukaMoses avatar Jun 04 '25 15:06 EbukaMoses