fix: add line height to unsortable columns on sortable datatable (#9311)

[pmweeks98]

Closes #9311

Changed

Added lineheight to ensure the correct font size is used in unsortable columns

Testing / Reviewing

{{ Add descriptions, steps or a checklist for how reviewers can verify this PR works or not }}

[github-actions]

DCO Assistant Lite bot All contributors have signed the DCO.

[pmweeks98]

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

[pmweeks98]

recheck

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	ea3d24e
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/627d295951ad0600097515ba
😎 Deploy Preview	https://deploy-preview-11404--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	ea3d24e
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/627d29595ea91200082d96ff
😎 Deploy Preview	https://deploy-preview-11404--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Name	Link
🔨 Latest commit	32018bd
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/62ac9655ce02cb000980f323
😎 Deploy Preview	https://deploy-preview-11404--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	32018bd
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/62ac9655025b200009f18769
😎 Deploy Preview	https://deploy-preview-11404--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[tay1orjones]

@pmweeks98 could you share a link to the storybook where the original bug can be reproduced to compare with the fix made here? I'm having a hard time determining what/where this fixes the column headers.

[jnm2377]

@tay1orjones this is the repro I saw in the issue... https://codesandbox.io/s/happy-minsky-n5i5s?file=/index.html
but I think it's using vanilla so I'm not sure if it's the same for react.

[tay1orjones]

@jnm2377 Oh thanks! I missed that. Yeah I can't repro in react. If this passes the VRT checks then I think it's alright?

[pmweeks98]

@tay1orjones can you advise on how to get a storybook with my changes in it?

[tay1orjones]

@pmweeks98 To edit the storybook you can modify the data table .stories.js files. When a commit is pushed to this PR the storybook will be deployed to a PR deploy preview via netlify in the comment/links above.

[pmweeks98]

@tay1orjones @jnm2377 have updated storybook to have a table with unsortable columns on sortable table, table size is set to xl now, not sure if that is desired, can ye have a look?

[tay1orjones]

@pmweeks98 Cool! Yeah I can see the fix when I toggle the line-height off in the dev tools. They don't align correctly and then with the fix turned on it aligns exactly as it should.

aligns.properly.with.the.line.height.applied.mov

Thanks for adding the story to demo the fix. I think in this case we can probably remove it now since there isn't much of a need for a story demonstrating this beyond to validate this bug. Once removed this looks good to me to merge 👍

[pmweeks98]

@tay1orjones removed

[pmweeks98]

@jnm2377 ping