style(DataTable): fix sortable table header padding

[tw15egan]

Closes #7724

Scopes the padding to the proper element when using the sortable version of DataTable

Changelog

Changed

• Removed padding from the th and applied it to the button that receives hover styles

Testing / Reviewing

Ensure hover styles are correct on the Sortable version of DataTable, and that no other variants have changed

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 0ec1f66

https://deploy-preview-7726--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit 0ec1f66

https://deploy-preview-7726--carbon-components-react.netlify.app

[aagonzales]

That was fast!

[dabrad26]

If using a table that has a mix of sortable headers and not sortable headers this causes the non-sortable headers to have no padding.

I assume you would need to do something like as well to compensate for that use case?

.#{$prefix}--data-table.#{$prefix}--data-table--sort th > .#{$prefix}--table-header-label {
    padding-right: $spacing-05;
    padding-left: $spacing-05;
}