Table height does not account for horizontal scrollbar

[mollykreis]

Pull Request

🤨 Rationale

Fixes #2520

👩‍💻 Implementation

The issue is that when the horizontal scrollbar was present while styling the table with a height of tableFitRowsHeight, a vertical scrollbar would be present because the height token's value didn't account for the height of the horizontal scrollbar. Now, the virtualizer's ResizeObserver hander calculates the height of the horizontal scrollbar (which is 0 if there isn't a horizontal scrollbar), and exposes that value as an @observable, similar to scrollHeight. As a result, the table can use both values in its calculation of tableFitRowsHeight, resulting in no vertical scrollbar when using the token (unless the max-height of the table is reached).

🧪 Testing

Manually tested, including the following scenarios to ensure the auto height of the table adjusted correctly as a horizontal scrollbar was added/removed:

• toggle the value of column-visible on a column
• add/remove a column from the DOM
• increase/decrease the minimum width of a column
• resize browser window

New auto tests, including chromatic test that loads a table with auto height and a horizontal scrollbar

✅ Checklist

• I have updated the project documentation to reflect my changes or determined no changes are needed.

[jattasNI]

I verified in macOS Safari and Firefox (both of which show overlay scrollbars) that the table fit rows height stories behave correctly. It doesn't reserve extra space for the horizontal scrollbar and it doesn't cause an unnecessary vertical scrollbar to appear when the horizontal one is shown. 🚀