fix(data-table): sortable, boolean column, and overflow menu row fixes

[emyarod]

Closes #6261
Closes #6262

This PR addresses data table issues specific to the boolean column, overflow menu, and sortable variants.

Testing / Reviewing

The row heights for all variants should be consistent with the headers, and the alignment and positioning of table elements should be consistent with the spec

[netlify]

Deploy preview for carbon-elements ready!

Built with commit a523eb7

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

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit a523eb7

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

[tw15egan]

Small issue with some sortable / some not Data Table (Tall variant) in Safari.

All other variants look good 👍

[laurenmrice]

Everything looks great to me ! thank you 🙌🏻

[joshblack]

Looks great after TJ's feedback 👀

[emyarod]

just a heads up, the Safari issue is an unresolved flexbox issue at the browser level

compare this demo in different browsers: https://codesandbox.io/s/funny-golick-u5zfe

a workaround is to add a wrapper element around the table header content, but then we will need to adjust table styles across the board accordingly. if that's fine I can proceed with that plan

related links

https://codepen.io/scheinercc/pen/ZEGwpKb
https://bugs.webkit.org/show_bug.cgi?id=169700
https://bugs.webkit.org/show_bug.cgi?id=177503

[tw15egan]

@emyarod I'm fine with it as is if it's a browser level issue, and it's only appearing on a very specific scenario (tall table with a mix of sortable headers, only on safari).

Thanks for the links!

[emyarod]

I have the fix prepared if you want to take a look, but if we don't want to go forward with it I can just revert the latest commits

[tw15egan]

@emyarod ah gotcha, let me check it out

[tw15egan]

Nice! Looks like its rendering properly across all browsers. Didn't realize adding a span inside the button would get around the flex inconsistencies in buttons.