[Bug]: Data table's sortable header background overlaps with the batch actions select all check box

[tozhangkai]

Package

carbon-components-react

Browser

Chrome, Safari, Firefox, Edge

Package version

7.41.0 and above

Description

On data table V10, if "batch actions" is enabled and the first column is sortable, the active sort background of the first column header overlaps with the select all check box column header. The problem can be reproduced by the official "carbon codepen" gallery's "Data table V10" example. See below:

Note that this is a regression since some update around May or June when we upgrade to carbon-components-react v7.41.0. We didn't see the problem before May when we were using carbon-components-react v7.27.0

CodeSandbox example

https://codepen.io/team/carbon/pen/jRWbZZ

Steps to reproduce

Open the carbon codepen gallery's "Data table V10" example provided above, then click the "Name" column header to sort it. You'll see the background overlapping with the check box.

Code of Conduct

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

[joshblack]

Hi there! I believe this is a duplicate of #9837. Tracking over in #9837 which should have a PR up now!