fix: Prevent OSCR score from popping out of dev card with long usernames

[Mandeep56Singh]

Description

This PR addresses the bug where a long username in a developer card causes the OSCR score to overflow and pop out of the card's boundary while also address related to it.

• resolve Hydaration error in Devcard component by using useEffect and useState for props.isLoading.
• fix styling in front view of card by limiting its width,text-center and wrapping
• fix styling in back view of card by truncate tailwind utility
• increase font size of oscr limit from 0.5 rem to 0.7rem to make it visible

closes #3981

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Front view at max username length

Back view at lengthy username

username in next line

Steps to QA

Tier (staff will fill in)

• [ ] Tier 1
• [ ] Tier 2
• [ ] Tier 3
• [ ] Tier 4

[optional] What gif best describes this PR or how it makes you feel?

[netlify[bot]]

✅ Deploy Preview for oss-insights ready!

Name	Link
🔨 Latest commit	c6d5128e875f23f70ff1a2298929cce638f2ebdf
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/66ec21d57005be00089761ba
😎 Deploy Preview	https://deploy-preview-4010--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	c6d5128e875f23f70ff1a2298929cce638f2ebdf
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/66ec21d5d81078000870ab97
😎 Deploy Preview	https://deploy-preview-4010--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[brandonroberts]

@Mandeep56Singh is this ready for review?

[nickytonline]

I was going to suggest not showing the OSCR on the back of the card since it's already on the front and leave as much real estate for the username. Thoughts @brandonroberts @zeucapua @isabensusan?

[Mandeep56Singh]

@brandonroberts actually I had hydration error while solving this issue, To my understanding It was due to props.isLoading. However I have fixed it. I would require your assistance on this.

[brandonroberts]

I was going to suggest not showing the OSCR on the back of the card since it's already on the front and leave as much real estate for the username. Thoughts @brandonroberts @zeucapua @isabensusan?

I agree

[BekahHW]

@nickytonline we have it on the back of the card like that to provide more context - it's out of 300. I think if we remove it here we need to have it referenced somewhere else on the card.

[nickytonline]

@nickytonline we have it on the back of the card like that to provide more context - it's out of 300. I think if we remove it here we need to have it referenced somewhere else on the card.

Maybe we move it somewhere else on the card on the back. It looks nice to see a full username on the back instead of it being cut off.

[Mandeep56Singh]

@BekahHW we can it in front, we just need to add a line displaying there are various ways for it

we can display the out of message under score, but when we have long username ( 2 lines ) then it will look ugly

displaying it with OSCR score

I found this good, since we don't really need "score" in text as OSCR itself is rating

[Mandeep56Singh]

@nickytonline full username on the back can take a lot of space as longest username can be of 39 characters, it would require two lines. I think adding more statistics on the back side, so user can know more about the person. We can remove the username, profile pic and oscr score from back.

we have different option for it.

added new statistics and remove header of back view

this looks good

what are your thoughts ?

[BekahHW]

I would prefer the original fix here. It solves the initial problem without a redesign. Maybe @isabensusan has thoughts.

[isabensusan]

@Mandeep56Singh I also prefer the original original fix! Let's truncate longer user names

[Mandeep56Singh]

@isabensusan ok, the front view also have overflowing problem, the longest github username can be 39 characters long, so it will be two lines, I thought of centering the username. what you are your thoughts ? thanks.

[isabensusan]

hey @Mandeep56Singh ! Yes, centering looks good :)

[Mandeep56Singh]

hey @Mandeep56Singh ! Yes, centering looks good :)

Thanks a lot, @isabensusan! I really appreciate the feedback. Looking forward to making more contributions to OpenSauced!"

[nickytonline]

When you have a chance @zeucapua, we need your approval. Thanks!