Introducing a New Series "The Open Sourcerer of Forem"!

I have been wanting to get into contributing to Open Source for some time now. However, it was difficult for me because it is quite intimidating.

Not only you have to contribute to a Repository with Hundreds of people, but you also have to set up your environment which I believe is the hardest part into getting started on contributing in general. This process requires the user to read documentation, fix errors along the way, etc.

Fortunately, after posting the article on how I used Google Gemini in my Winning Google Gemini: Writing Challenge, I was able to start actual contribution and I was grateful that one of my Pull Requests got merge for the first time! I hope you guys enjoy this series :D

Check out the post that start it all:

I used Google Gemini for the First Time. A Deep Analysis of my Experience so far! ✨

Built with Google Gemini: Writing Challenge

FrancisTRᴅᴇᴠ (っ◔◡◔)っ

FrancisTRᴅᴇᴠ (っ◔◡◔)っ

FrancisTRᴅᴇᴠ (っ◔◡◔)っ

Follow

Mar 3

I used Google Gemini for the First Time. A Deep Analysis of my Experience so far! ✨

#devchallenge #geminireflections #gemini #bash

40 reactions

14 comments

11 min read

Welcome Sourcerers!

Welcome to the series where I tell a tale of an Open Sourcerer of Forem (which is me!) made contribution to the Official Forem Repository! I will be sharing the issue, the Pull Request, and what I have learned (which you may find it useful if you want to contribute)!

The Issue

There is an issue named "UI Issue" by @konark_13:

UI Issue #22902

Konarksharma13 posted on Mar 05, 2026

Describe the bug

While browsing Dev.to, I noticed a UI issue where two layouts appear to overlap, resulting in a combined and messy layout. This causes visual misalignment on the page and affects readability.

To Reproduce

1. Go to https://dev.to/devteam/welcome-thread-v367-33cn
2. Navigate to the comment.
3. Hover over the likes over the comment likes.
4. Notice that two layout components overlap and merge into an inconsistent layout

Expected behavior

The layout should render correctly without overlapping elements. Each component should maintain its intended structure and spacing.

Screenshots

https://github.com/user-attachments/assets/dcb6f2bb-8579-49d2-babb-c3c2f53ed464

Desktop (please complete the following information):

• OS, version: Mac
• Browser, version: Brave

Smartphone (please complete the following information):

• Not tested on mobile.

Additional context I regularly use Dev.to and noticed this while browsing. It may be a minor UI issue, but I thought it would be helpful to report it so it can be reviewed if necessary.

View on GitHub

This issue states that the UI z-index is out of place, specifically on the multiple reactions. For example, you notice that this UI z-index is incorrect:

This is my first issue I tackle as an Open Source Contributor. I decide to tackle this since it allows me to get a sense of the Code-Base in general.

The first steps I did was to find the ClassName or ID of the element responsible for the issue. That way, I can search up the name in Visual Studio Code and look for that name in a CSS file.

When I began investigating, I found the ClassName responsible, which is crayons-article-actions.

On my Visual Studio Code, I search the name and it seems to be in the SCSS file article.SCSS. I change the Z-index to the highest number and began making my Pull Request from there.

The Pull Request

Here is the Pull Request I made to solve this issue:

Z-Index Increase for the Emoji UI #22905

FrancisTRAlt posted on Mar 05, 2026

What type of PR is this? (check all applicable)

• [ ] Refactor
• [ ] Feature
• [x] Bug Fix
• [ ] Optimization
• [ ] Documentation Update

Description

Fixed the UI issue on the Emoji where you can see the "Like" button over the list of emojis as shown below:

Before:

After:

This also happen in the GIF. It is fixed now:

Before:

After:

Related Tickets & Documents

• Related Issue #22902
• Closes #22902

QA Instructions, Screenshots, Recordings

1. Go on any post on Dev.to.

2. Inspect the element page and look for the class name "crayons-article-actions print-hidden".

3. Change the CSS.

Instead of: z-index: var(z--sticky)

It should be: z-index: 9999

4. Comment out the z-index for this class below:

5. Then scroll and it should be the highest z-index of the page.

What gif best describes this PR or how it makes you feel?

View on GitHub

All it does is increase the "z-index" to 9999. It is worth noting that this is not a "great" solution, but it does solve the issue for now.

Later on, @ben refine this solution:

// Ensure this is above comments but below dropdowns/modals/popovers (like billboards)

z-index: calc(var(--z-dropdown) - 1);

Ultimately, the issue was fixed as shown below:

What I learned

Here is what I learned after working on this issue!

1) Humble Beginning

Before this PR, I made my first Pull Request, which did not get merged. I realized that I was creating a Pull Request that I believe that is needed and not what Forem needs. There is no shame into that and sometimes you fumble before you can succeed. Not every Pull Request will get merged and that's ok!

When contributing to any open source, understand their needs and accomplish it. To start off, look at their issues and find an issue that seems doable to tackle. It can be as simple as fixing the UI, or changing documentation. Whatever it may be, make sure it aligns to their needs!

2) Slow Down

Even after the Pull request got merge, I had a conversation in that issue with @konark_13 about it. I feel like it went too quickly since I was so eager into completing that issue.

According to the Forem's documentation, you have at least 2 weeks to work on the issue. That should give you a lot of time. It is also important to document your work as well and keeping it updated, so that the Repository maintainer will know that you are still working on the issue.

Overall, communication is important to any collaboration! Apologies @konark_13 if I was tackling this issue too quickly and not giving you a chance!

I want to become an Open Sourcerer of Forem! Where do I start?

Everything you need is on the Official Forem GitHub Repository!

I suggest to setup your environment and making sure everything is working. Ultimately, you are trying to get the localhost to run!

You made it to the end!

You have made it to the end Traveler! Thank you for reading this chapter and stay tuned for the next chapter!