[Blog] Make category and tag list scrollable

[debo19]

Current Behavior With the ever-growing tags and category list for blogs, the sidebar is becoming too long and is overlapping with the footer.

Desired Situation Give the tag and category list a fixed height on the page but make both the the lists scrollable.

---

Contributor Resources

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• See contributing instructions
• See Layer5 site designs in this Figma project. Join the Layer5 Community for access.

[NPDebs]

Hi. Can I work on this task?

[debo19]

Sure @NPDebs

[NPDebs]

Thank you! 🤲🏻🙂😊

[zww320]

Hello! May I join you @NPDebs to work on this issue together?

[vishnus17]

Hi @NPDebs. Are you still working on this issue? If not, can I take over ? I was going through it and I've found a solution. Thanks.

[debo19]

@zwwang98 Since you commented first, I'll wait for you to respond if you want to take this up. Otherwise we'll assign @vishnus17

[zww320]

@zwwang98 Since you commented first, I'll wait for you to respond if you want to take this up. Otherwise we'll assign @vishnus17

I would love to work on it. Really appreciate for this opportunity.

[debo19]

Go ahead @zwwang98

[zww320]

Go ahead @zwwang98

Hello @debo19 ! Thank you again for this opportunity! I really appreciate it!

I made some progress and I want to make sure I am on the right track:

1. added another class named scroll for the list ul
2. set the class with max-height and overflow in the style.js file

Here is how it looks now.

Also, after checking the contribution guide, I still have some problems with the contribution flow:

1. Is there any rule or convention on the git branch name? Like `/"?
2. Do I need to explain my thought and implementation in detail?

If this is close to the desired situation, I also have some possible next steps in my mind:

1. Now the max-height is hard-coded. Do we need to make it dynamic to some variable such as the height of the inner<Link> component?
2. In the categories scroll list, there is no space between the numbers and the right scroll bar. I think adding some space could look better.
3. Add dark mode for the scroll bar. I tried this one, but it turned out customized scrollbar-color is not supported yet in chrome and most browsers (reference on MDN).

Thank you again! I really love this inclusive and supportive community. I will dedicate myself to making it better.

[debo19]

@zwwang98 That's great! A well described PR is always desirable. You can add screenshots or video recordings to help with the review process.

The Contributing Instructions lists all conventions to follow.

We could use some space between the numbers and the scrollbar. I am not sure how it looks in the dark mode. Once you open the PR, I think we can review that further.