Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Overflowing screen on the mobile view #112

Open
1 task done
vatsalsinghkv opened this issue Jan 9, 2024 · 1 comment
Open
1 task done

[BUG] Overflowing screen on the mobile view #112

vatsalsinghkv opened this issue Jan 9, 2024 · 1 comment
Assignees
Labels
🛠 goal: fix 🏁 status: ready for dev You can asked for this issue to be assigned (if not already assigned)

Comments

@vatsalsinghkv
Copy link

Has this bug been raised before?

  • I have checked "open" AND "closed" issues and this is not a duplicate

Where did you find this bug?

Production

Description

I've noticed the web-app has some overflow issue in the mobile view which breaks the responsiveness of the app.

  • Repositories names overflow.
  • Rating component break the flow in the repository card.

Steps to Reproduce

  1. Go to home page.
  2. Open the mobile view.
  3. Repositories names are overflowing, results in breaking navbar.

Screenshots

Overflow Issue

Screenshot 2024-01-09 at 2 54 32 PM

Rate component breaks the flow on mobile view

Screenshot 2024-01-09 at 2 58 48 PM

Do you want to work on this issue?

Yes

If "yes" to above, please explain how you would technically implement this

So I've got some of the following approaches:

1. I can simply put the overflowing repository title in the next line in the repository card like this (I personally recommend this):

Screenshot 2024-01-09 at 5 58 50 PM

2. I can terminate the overflowing string and show ... in the end of the repo name, and full repo name when you hover over it, like this:

Screenshot 2024-01-09 at 6 05 27 PM
@vatsalsinghkv vatsalsinghkv added 🚦 status: awaiting triage Waiting for maintainers to verify (please do not start work on this yet) 🛠 goal: fix labels Jan 9, 2024
@eddiejaoude eddiejaoude added 🏁 status: ready for dev You can asked for this issue to be assigned (if not already assigned) and removed 🚦 status: awaiting triage Waiting for maintainers to verify (please do not start work on this yet) labels Jan 15, 2024
@eddiejaoude
Copy link
Member

eddiejaoude commented Jan 15, 2024

Thank you for raising, I have assigned it to you

I think can you try the wrap and see how it looks

Other ideas:

  • hide the logo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🛠 goal: fix 🏁 status: ready for dev You can asked for this issue to be assigned (if not already assigned)
Projects
None yet
Development

No branches or pull requests

2 participants