fix: Prevent OSCR score from popping out of dev card with long usernames #4010
Conversation
✅ Deploy Preview for oss-insights ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for design-insights ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
@Mandeep56Singh is this ready for review? |
|
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? |
|
@brandonroberts actually I had hydration error while solving this issue, To my understanding It was due to props.isLoading. |
I agree |
|
@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. |
|
@BekahHW we can it in front, we just need to add a line displaying 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
|
|
@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 ? |
|
I would prefer the original fix here. It solves the initial problem without a redesign. Maybe @isabensusan has thoughts. |
|
@Mandeep56Singh I also prefer the original original fix! Let's truncate longer user names |
|
@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.
|
|
hey @Mandeep56Singh ! Yes, centering looks good :) |
Thanks a lot, @isabensusan! I really appreciate the feedback. |
| @@ -38,6 +39,13 @@ export default function DevCard(props: DevCardProps) { | |||
| } | |||
| }, [props.isInteractive, props.isFlipped]); | |||
|
|
|||
| // used to solve hydartion error | |||
| useEffect(() => { | |||
There was a problem hiding this comment.
We have a hook for this already named useHasMounted that can be used instead.
import { useHasMounted } from "lib/hooks/useHasMounted";
const hasMounted = useHasMounted();
Mandeep56Singh
requested review from
zeucapua and
nickytonline
as code owners
There was a problem hiding this comment.
Works great @Mandeep56Singh! One small change request and this is good to go.
nickytonline
dismissed
brandonroberts’s stale review
Brandon is off today, and his change requests have been addressed.
Co-authored-by: Nick Taylor <[email protected]>
nickytonline
force-pushed
the
fix/devcard-longnames
branch
from
a40fe33
to
c6d5128
Compare
|
When you have a chance @zeucapua, we need your approval. Thanks! |
Pull request was closed
## [2.63.0-beta.3](v2.63.0-beta.2...v2.63.0-beta.3) (2024-09-19) ### 🐛 Bug Fixes * Prevent OSCR score from popping out of dev card with long usernames ([#4010](#4010)) ([b92f477](b92f477))
## [2.63.0](v2.62.0...v2.63.0) (2024-09-19) ### 🍕 Features * updated `/explore` page ([#4053](#4053)) ([37ee0f5](37ee0f5)) ### 🐛 Bug Fixes * Prevent OSCR score from popping out of dev card with long usernames ([#4010](#4010)) ([b92f477](b92f477)) * redirect all explore requests to the new explore page ([#4112](#4112)) ([182f091](182f091)) * set workspaces for `/explore` "Discover Workspaces" section ([#4106](#4106)) ([41c7248](41c7248))
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.
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)
[optional] What gif best describes this PR or how it makes you feel?