bug(data frame): Fix scrolling in fillable cards

[jcheng5]

Fixes #1549.

Without this fix, the data frame in the tips dashboard example is sized to be as tall as the (non-virtualized) table. This causes the summary line ("Viewing rows x through y of z") to be covered, as well as the horizontal scroll bar on the data frame.

Working:

Broken:

The change seems to have happened when Tanstack was updated. I set a breakpoint on these lines:

py-shiny/js/data-frame/index.tsx

Lines 653 to 657 in 798d02c

	const scrollHeight = containerRef.current?.scrollHeight;
	const clientHeight = containerRef.current?.clientHeight;
	if (scrollHeight && clientHeight && scrollHeight <= clientHeight) {
	scrollingClass = "";
	}

For both working and non-working code, both scrollHeight and clientHeight are undefined the first time through; this causes .scrolling to be applied. The second time through, for the working, scrollHeight and clientHeight are different and I can see cells in the table (while the debugger is paused); but for the non-working, scrollHeight and clientHeight are the same and there are no cells in the table. This causes .scrolling to be removed. And once removed, it won't be applied in the future, because scrollHeight and clientHeight will always be the same value--because it's not scrolling.

The fix is to use a layout effect (runs after DOM nodes are inserted/mutated but before the browser has had a chance to paint) to temporarily apply scrolling, measure, and then remove scrolling if appropriate. I'm a little worried that temporarily applying scrolling is too violent, but I don't know what else to do, and it appears to be flicker-free. In the common case where scrolling is correctly turned on, I think it will be very quick, as no CSS classes will actually be applied or removed.

[schloerke]

This fix still gives expected behavior for #1498. 👍