Fading edge effect on the tab sidebar does not apply to entries below (and including) the selected tab

[Smooth-E]

Captchas

• [X] I have read the instructions.
• [X] I have searched existing issues and avoided creating duplicates.
• [X] I am not filing an enhancement request.

What happened?

There is a so called "fading edge" effect applied at the bottom of the vertical tab pane when there are too much tabs and the list is overflowing. This "fading edge" strip isn't rendered when you scroll past the selected tab.

The selected tab is below and isn't yet visible	The selected tab is above
As you can see, names and icons of the tabs are faded with a smooth gradient	As you can see, name and icon of the tab are just cut out where list's viewport ends

Also, this may fall into the "enhancement request" category, but there is no such "fading edge" at the top of the tab strip. I think, it would be nice to add it there too.

Checking as not reproducible on Firefox as vertical tab pane is unique to Zen.

Reproducible?

• [X] I have checked that this issue cannot be reproduced on Mozilla Firefox.

Version

1.0.1-a.16

What platform are you seeing the problem on?

Windows

Relevant log output

No response

[dosubot[bot]]

I couldn't find specific information about the "fading edge" effect in the tab sidebar within the repository. However, the CSS file src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css is responsible for rendering the tab sidebar and its effects, which might include the "fading edge" effect. Additionally, the JavaScript file src/browser/components/sidebar/browser-sidebar.js manages the positioning and ordering of elements within the sidebar, potentially affecting how the "fading edge" is applied ^[1][2].

If you're experiencing issues with the "fading edge" effect not applying correctly, it might be worth checking these files for any relevant styles or scripts that could be causing the issue.

To continue talking to Dosu, mention @dosu.