DEV Community

Cover image for Hacktoberfest: Fixing a UI bug
TD
TD

Posted on • Edited on

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.

Top comments (0)