fix: left align text in sortable header

[griffindvs]

Closes #9327

Left aligns text in sortable header labels inside the DataTable component.

Changelog

New

• Add text-align: left to Button elements with .bx--table-sort

Testing / Reviewing

1. View the Sorting DataTable example in the Storybook
2. Resize the window until a column header splits into multiple lines
3. Check that the text is now left aligned

Screenshots:

Before:

After:

[netlify]

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: 54fc579

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/610324e51aff360008e1f4db

😎 Browse the preview: https://deploy-preview-9329--carbon-react-next.netlify.app

[github-actions]

DCO Assistant Lite bot All contributors have signed the DCO.

[griffindvs]

I have read the DCO document and I hereby sign the DCO.

[netlify]

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: 54fc579

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/610324e53d0bb40008273379

😎 Browse the preview: https://deploy-preview-9329--carbon-elements.netlify.app

[netlify]

✔️ Deploy Preview for carbon-components-react ready!
Built without sensitive environment variables

🔨 Explore the source changes: 54fc579

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/610324e5931d870008801250

😎 Browse the preview: https://deploy-preview-9329--carbon-components-react.netlify.app