[Bug] Invalid line-height CSS property for StyledTable

[Eta0]

Invalid StyledTable line-height

The default line-height CSS property defined for a StyledTable uses an invalid calc expression, causing it to be ignored in most browsers.

react/packages/react/src/DataTable/Table.tsx

Line 34 in dc2f083

line-height: calc(20 / var(--table-font-size));

(Nearby, --table-font-size is defined as 0.75rem, so this ends up as calc(20 / 0.75rem)).

Due to a bug in Chromium (seemingly fixed in commit chromium/chromium@9928efc), for some newer Chromium builds, this was briefly not ignored, and resulted in illegibly short lines. This property should be removed or changed to a more correct default like line-height: 1.5.

Interestingly, this exact calculation was added as a test case as an example of an invalid calc expression in the Chromium source tree (calc(20 / 0.75rem)), possibly motivated by this CSS snippet, so that should serve as quick proof that this line is currently not correct:

assert_invalid_value("margin-left", "calc(20 / 0.75rem)", // invalid calc expression
                     "division by non-number");

[joshblack]

Hi there, @Eta0! Thanks so much for taking the time to make this issue, it was incredibly helpful 🙏 Opened up what I hope will be a fix for this over in: #5363 so that we're no longer dividing by that rem value.

Thanks again!