Cropped text in Gamification Board page

codeforcauseorg / edu-client

Product focuses on 100% education as well as upskilling developing countries and rural areas.

https://educlient.codeforcause.org/

MIT License

128 stars 148 forks source link

Cropped text in Gamification Board page #389

Closed abhishek2x closed 2 years ago

abhishek2x commented 2 years ago

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behaviour:

open Gamification page of the application

Expected behavior

The text should not be cropped

Logs

If applicable, add logs to help explain your problem (e.g. the error message and/or exception traceback).

Environment (please complete the following information):

OS: Linux
Browser: Microsoft Edge

Additional context

abhishek2x commented 2 years ago

I would like to work on this issue

abhishek2x commented 2 years ago

@adarsh-technocrat can you please look into this?

adarsh-technocrat commented 2 years ago

@adarsh-technocrat can you please look into this?

Hi, @abhishek2x can you please provide for which screen size you made this change! and it would be better if you could provide the output of the change that you made :)

abhishek2x commented 2 years ago

Sure, here are the required screenshots for different screen sizes.

Breakpoint: 755px

For width >= 755px

For width < 755px

@adarsh-technocrat let me know if any changes or modifications are required :)

adarsh-technocrat commented 2 years ago

Hey, @abhishek2x the change looks great but the thing is you have hardcoded the screen width right and that is what @Abhishek-kumar09 has mentioned in the PR we can find either different way to solve this issue and those breakpoints are filled with some custom values either you can play with those values theme/index.js

abhishek2x commented 2 years ago

Alright, I'll figure out a way around and update the PR. Thanks!