Blog-sidebar. Make blog category and tag list scrollable.

[zww320]

Signed-off-by: ziweiwang98 [email protected]

Description

This PR fixes #3154

Notes for Reviewers

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. For now, I added hard-coded padding-right: 10px for the ul list.
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).

Signed commits

• [x] Yes, I signed my commits.

[l5io]

🚀 Preview for commit 0363cec3adfcc9a3a0bfea8b75162f4531d91232 at: https://63282ab2c049e47deaf947dd--layer5.netlify.app

[Nikhil-Ladha]

Let's use webkit-scrollbar and scrollbar-color/width in combination. That would cover all the browsers.

[Nikhil-Ladha]

Just update the scrollbar width, no need to update the color. And, set the max-height : 40rem

[leecalcote]

Let's use webkit-scrollbar and scrollbar-color/width in combination. That would cover all the browsers.

Slowly, but surely, you're coming around. 😁

[l5io]

🚀 Preview for commit 237ddb95d2aee6f554e38d402aafdeca9d7a0d8a at: https://632a42c995aa6631f13b364a--layer5.netlify.app

[debo19]

@zwwang98 will you share your update on today's websites call?

[l5io]

🚀 Preview for commit 03a155b00eefba546bf427d9c3ad059d04b1fd07 at: https://63314ed5b515e8303aa32078--layer5.netlify.app

[Nikhil-Ladha]

The scrollbar width is not yet customised. Try this:

ul.scroll::-webkit-scrollbar-thumb {
    background: #a9a9a9;
    border-radius: 1rem;
}
ul.scroll::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 1rem;
}
ul.scroll::-webkit-scrollbar-button {
    display: none;
}
ul.scroll::-webkit-scrollbar {
    width: 6px;
    display: block;
}

ul.scroll {
scrollbar-width: thin;
}

[Nikhil-Ladha]

@zwwang98 can you knock-off this small update quickly?

[zww320]

@zwwang98 can you knock-off this small update quickly?

Thank you for covering that for me! I really appreciate it!

[Nikhil-Ladha]

@zwwang98 can you knock-off this small update quickly?

Thank you for covering that for me! I really appreciate it!

No problem 😄