[Bug]: Tabs Component Left Slide Arrow on Small Screens has Transparent Background

[zacharydmoore]

Package

@carbon/react

Browser

Chrome

Package version

1.52.0

React version

v16.14.0

Description

The Tabs component's left slide arrow (used when there is a small screen and long tabs) has a transparent background now causing the arrow to bleed into text that is now shown.

Reproduction/example

https://stackblitz.com/edit/github-pkl5n9?file=src%2FApp.jsx

Steps to reproduce

Navigate to Tabs component in Carbon Design System storybook. Shrink browser window until slider arrows begin to show. Press arrow until both left and right show (middle of tabs)

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[wood-doug]

Setting z-index to 1 in .cds--tabs .cds--tab--overflow-nav-button--previous seems to address this.

[emyarod]

closed via #16522