🐛 [Bug report]: Styling Issue with Contributors Page

[Shivam-Katare]

Descrcibe the bug?

The contributor's page does not display the full image of the user. The image is cut off at the top.

When clicking on the badges (if available), the modal/dialog box opens on the left side. It should open in the center of the screen.

The text inside that modal should be in markdown format.

Instead of showing ReactPlay(https://reactplay.io/), it should display ReactPlay with clickable links.

The page is also not responsive, but it should be.

Steps to reproduce the bug?

1. Go to the ReactPlay site
2. Click on the browse button
3. Open any play
4. Click on the Creator of that Play(the steps are shown below now...)

r.-.Trim.mp4

Expected behavior

• The cut-off image should be properly visible
• The page must be responsive
• The modal should open at the center of the screen
• The text inside the modal must be in markdown format with clickable links.

Desktop (Please provide your system information)

Browser: Chrome
OS: Windows

Mobile (Please provide your device information)

No response

Screenshot / Screenshare

No response

Relevant log output

No response

Record

• I have checked the existing issues
• I have read the Contributing Guidelines
• I want to work on this issue
• I am a Hacktoberfest contributor

Code of Conduct

• I agree to follow this project's Code of Conduct

[github-actions]

Hey! contributor, thank you for opening an Issue 🎉.

@reactplay/maintainers will review your submission soon and give you helpful feedback. If you're interested in continuing your contributions to open source and want to be a part of a welcoming and fantastic community, we invite you to join our ReactPlay Discord Community.
Show your support by starring ⭐ this repository. Thank you and we appreciate your contribution to open source!
Stale Marking : After 30 days of inactivity this issue/PR will be marked as stale issue/PR and it will be closed and locked in 7 days if no further activity occurs.

[Goutamchoudhary907]

I want to work on this , can you assign this to me

[priyankarpal]

I want to work on this , can you assign this to me

Unfortunately, you can only work one issue at a time,so other contributors can work.

[RohitMangale]

I'd like to contribute to this issue. Could you please assign it to me and add the Hacktoberfest tag?

[priyankarpal]

I'd like to contribute to this issue. Could you please assign it to me and add the Hacktoberfest tag?

sure

[KrishDave1]

I can work on this issue.Can you assign this to me?

[priyankarpal]

@RohitMangale Since there haven't been any updates, we will have to unassign this issue from you.

[priyankarpal]

I can work on this issue.Can you assign this to me?

assigned to you

[KrishDave1]

On looking at the issue myself, I see that the image being cutoff is no longer the case.Also, modal is also centered properly.Should I go ahead and change the other 2 for this issue?

[priyankarpal]

On looking at the issue myself, I see that the image being cutoff is no longer the case.Also, modal is also centered properly.Should I go ahead and change the other 2 for this issue?

@Shivam-Katare

[Shivam-Katare]

Yes, @KrishDave1 you're correct, it's no longer a case now. So, yes you can work on the other two issues with this page.

These ones:

The text inside that modal should be in markdown format.

Instead of showing ReactPlay(https://reactplay.io/), it should display ReactPlay with clickable links.

The page is also not responsive, but it should be.

[PriteshKiri]

Hey @KrishDave1,

Any updates on the issue ?

[KrishDave1]

Hey @KrishDave1,

Any updates on the issue ?

Was a bit busy before 2 days.Will do it in 1-2 days

[KrishDave1]

@Shivam-Katare @PriteshKiri So there are 2 ways to solve this problem.
1)We can convert the entire description in markdown text.Here the database will have to be updated to incorporate the markdown format.
2)I can hardcode for just the links I see(i.e ReactPlay link , Nhost link , and stackstream link).
I can do any of these.Please suggest which approach should be done

[KrishDave1]

@PriteshKiri @Shivam-Katare Please mention which approach I should take.Thanks

[Shivam-Katare]

Hey @KrishDave1, you can go for a 2nd approach, which is hardcoding the links.