DEV Community

Cover image for Hacktoberfest: Fixing a UI bug
TD
TD

Posted on • Edited on

2

Hacktoberfest: Fixing a UI bug

As a beginner, looking for a decent project to contribute to requires tremendous searching on my end. For my second PR for Hacktoberfest, I was able to find an Issue to work on in a project known as Telescope.

About Telescope

Telescope is an open-source web application created by Seneca College students to aggregate and display a timeline of Seneca's open-source blogs.

Finding an Issue

I wanted my contribution to be meaningful, so I thoroughly browsed the open issues in the Telescope GitHub repo. I found one related to a bug in the user interface. I decided to work on this issue because I am familiar with Material UI, and the Telescope project is utilizing it in its front end.

About the Issue

Post authentication, hovering over the user avatar in the top navigation shows the user name overlapping with the tooltip.

Image description

Fixing the Issue

If you are familiar with Material UI, this is not a difficult bug to fix. All I had to do was add the marginTop property to position the tooltip outside the avatar. I also made the value of the marginTop consistent with the side navbar that appears when you scroll down a page.

Challenge Encountered

When setting up Telescope on my local machine, I had a problem correctly seeding the PostgresSQL database. Since Telescope is a large project utilizing many technologies, setting it up locally could prove difficult for some developers. However, after connecting with the members of the Telescope community on Slack, I was able to resolve the problem.

Outcome

Image description
I was able to fix a potential accessibility bug in the UI. Now, when logged-in user hovers over their avatar in the top navigation, they see the "Sign out" tooltip appearing outside the avatar space.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay