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

[Smooth-E]

Captchas

• I have read the instructions.
• I have searched existing issues and avoided creating duplicates.
• 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?

• 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]

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.

[salamijason]

Hey do you still get this visual bug on a22?

[Smooth-E]

Hey do you still get this visual bug on a22?

Yes. Same issue: no fading edge below selected tab on the bottom, no fading edge at all on the top. I am using the default light theme.

[salamijason]

Was able to recreate on our end. will be sending to big dev cheff. Thanks for the info!

[dosubot]

Hi, @Smooth-E. I'm Dosu, and I'm helping the desktop team manage their backlog. I'm marking this issue as stale.

Issue Summary:

• Issue with "fading edge" effect on tab sidebar in version 1.0.1-a.16 on Windows.
• I suggested checking CSS and JavaScript files.
• You confirmed the issue persists in version a22.
• Salamijason recreated the issue and plans to escalate it to the development team.

Next Steps:

• Please confirm if this issue is still relevant to the latest version of the desktop repository.
• If no further updates are provided, the issue will be automatically closed in 7 days.

Thank you for your understanding and contribution!

[Smooth-E]

Well. Here's an update: now there is no "fading edge" effect neither when the select tab is above or below the bottom button group. There is also no such effect for the top button group. It is an improvement in terms of consistency, but I think a fading edge effect is a good addition to indicate there are items below or above, and you need to scroll to see them.

Edit: Browser version is 1.6b.